JavaScript事件の対象紹介
9571 ワード
JavaScriptイベントの重要な側面は、それらがいくつかの比較的一致した特徴を持っていて、開発に強力な機能を提供することができます。
最も便利で強力なのはイベントの対象です。マウスのイベントやキーボードのパッティングなどを処理してくれます。
さらに、一般的なイベントの捕獲／発泡流の関数を変更することができる。
イベントの対象
二マウスイベント
//マウスイベントはWeb上で最もよく使われているイベントです。やはりマウスは最も主要な位置決めデバイスです。
1.マウスボタン
ユーザーはキーボードを使用するとキーボードイベントを起動します。
「DOM 2級事件」は最初にキーボードイベントを規定しましたが、その後に該当内容を削除しました。
最終的には最初のキーボードイベントを使用しましたが、IE 9は先に「DOM 3」レベルのキーボードイベントをサポートしました。
1.キーコード
//標準的なDOMイベントにおいて、イベントオブジェクトは、その特定のイベントを作成することに関連する属性と方法を含む。
//トリガするイベントの種類が違っています。利用可能な属性と方法も違います。
W 3 Cでイベントオブジェクトの属性と方法
属性/方法 タイプ 読みます 説明
bubbles ボロア 読み取り専用 事件が泡を吹いているかどうかを示す。
キャンセルケーブル ボロア 読み取り専用 イベントのデフォルトの行動をキャンセルできるかどうかを示します。
currentTarget Element 読み取り専用 そのイベントハンドラは現在イベントを処理しています。
detail インテグ 読み取り専用 イベントに関する詳細情報一般的にローラー情報の値に使用されます。
eventPhite インテグ 読み取り専用 イベントハンドラを呼び出した段階：1はキャプチャ段階、2は処理対象、3は発泡段階を示す。
preventDefault() Function 読み取り専用 イベントのデフォルトをキャンセルします。もしcancenlableの値がtrueであれば、この方法が使えます。
stopPropagation() Function 読み取り専用 イベントのさらなる捕獲または発泡をキャンセルする。bubblesの値がtrueであれば、この方法が使えます。
タージ Element 読み取り専用 イベントの目標
タイプ String 読み取り専用 トリガされるイベントの種類。
ビュー AbstractView 読み取り専用 イベントに関連する抽象的なビュー;事件が発生したwindowの対象と同じです。
IEにおけるイベントオブジェクトの属性
属性 タイプ 読みます 説明
cancel Bubble ボロア 読み書き デフォルトの値はfalseですが、trueに設定すると、イベントの泡がキャンセルされます。
return Value ボロア 読み書き デフォルトの値はtrueですが、falseに設定するとイベントのデフォルトの動作がキャンセルされます。
srcele ment Element 読み取り専用 イベントの目標
タイプ String 読み取り専用 トリガされたイベントのタイプ;
イベントフローは、ページからイベントを受信する順序であり、いくつかの要素が重なっている場合は、その中の一つの要素をクリックします。
現在クリックされている要素だけがイベントをトリガするのではなく、クリック範囲に積層されたすべての要素がイベントをトリガします。
イベントフローは2つのモードを含む。
1.事件の泡が立つ
中から外へ一つ一つ触発されます。
2.イベントキャプチャ
外から中へ一つ一つ触発されます。
最も便利で強力なのはイベントの対象です。マウスのイベントやキーボードのパッティングなどを処理してくれます。
さらに、一般的なイベントの捕獲／発泡流の関数を変更することができる。
イベントの対象
// : ;
// : . = ;
document.onclick = function(){
alert('Lee');
}
// PS: :click , ;
// onclick: ( );
// document: , ;
// function(): , ;
// , ;
document.onclick = box; // , ;
function box(){
alert('Lee');
}
// this
// : , ,this ;
var input = document.getElementsByTagName('input')[0];
input.onclick = function(){
alert(this.value); // HTMLInputElement,this input ;
}
// , , ;
// / / ;
// , event , ;
// , , , ;
function box(){ // ;
alert(arguments.length); // 0; ;
}
input.onclick = function(){ // ;
alert(arguments.length); // 1; ;
}
// PS: , , ;
// , , event ;
input.onclick = function(){
alert(arguments[0]); // MouseEvent, ;
}
// , , ;
input.onclick = function(evt){ // event ,
alert(evt); // MouseEvent, ;
}
// event , W3C ,IE ,IE event , window.event ;
input.onclick = function(evt){
var e = evt || window.event;
alert(e); // event ;
}二マウスイベント
//マウスイベントはWeb上で最もよく使われているイベントです。やはりマウスは最も主要な位置決めデバイスです。
1.マウスボタン
// ( ) click , ;
// mousedown mouseup , event button , ;
IE(W3C) button
0 ( );
1 ( );
2 ( );
IE button
1 ( );
2 ( );
4 ;
// ;
function getButton(evt){
var e = evt || window.event;
if(evt){ // Chrome W3C IE ;
return e.button; // ;
}else if(window.event){
switch(e.button){
case 1:
return 0;
case 4:
return 1;
case 2:
return 2;
}
}
}
document.onmouseup = function(evt){
if(getButton(evt) == 0){
alert(' !');
}else if(getButton(evt) == 1){
alert(' ');
}else if(getButton(evt) == 2){
alert(' !');
}
}
// :
// ;
// ;
clientX X , ;
clientY Y , ;
screenX X , ;
screenY Y , ;
pageX X , ;
pageY Y , ;
// ;
document.onclick = function(evt){
var e = evt || window.event;
alert(e.clientX+','+e.clientY);
alert(e.screenX+','+e.screenY);
alert(e.pageX+','+e.pageY);
}
// PS: ,pageX pageY clientX clientY ;
// IE8 , ;
// document.body( ) document.documentElement( ) scrollTop scrollLeft ;
// pageX pageY ;
var div = document.getElementById('myDiv');
addEventListener(div,'click',function(evt){
var evt = event || window.event;
var pageX = evt.pageX,
pageY = evt.pageY;
if(pageX === undefined){
pageX = evt.clientX+(docuemnt.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY === undefined){
pageY = evt.clientY+(document.body.scrollTop || document.documentElement.srollTop);
}
alert(pageX+pageY);
});
// , ;
// :Shift/Ctrl/Alt Meat(Window Windows , Cmd );
// , ;
shiftKey Shift ;
ctrlKey ctrlKey ;
altKey alt ;
metaKey windows ,IE ;
// ;
function getKey(evt){
var e = evt || window.event;
var keys = [];
if(e.shiftKey) keys.push('shift'); // shift ;
if(e.ctrlKey) keys.push('ctrl');
if(e.altKey) keys.push('alt');
return keys;
}
document.onclick = function(evt){
alert(getKey(evt)); // , shift/ctrl/alt ;
}ユーザーはキーボードを使用するとキーボードイベントを起動します。
「DOM 2級事件」は最初にキーボードイベントを規定しましたが、その後に該当内容を削除しました。
最終的には最初のキーボードイベントを使用しましたが、IE 9は先に「DOM 3」レベルのキーボードイベントをサポートしました。
1.キーコード
// keydown keyup ,event keyCode , ;
// ,keyCode ASCII ; ;
document.onkeydown = function(evt){
alert(evt.keyCode);
}
// Firefox/Chrome/Safari event charCode ;
// keypress , ASII ;( );
// keyCode 0 ;
// IE Opear keyCode ASCII ;
function getCharCode(evt){
var e = evt || window.event;
if(typeof e.charCode == 'number'){
return e.charCode;
}else{
return e.keyCode;
}
}
document.onkeypress = function(evt){
alert(getCharCode(evt));
}
// PS: String.fromCharCode() ASCII ;//標準的なDOMイベントにおいて、イベントオブジェクトは、その特定のイベントを作成することに関連する属性と方法を含む。
//トリガするイベントの種類が違っています。利用可能な属性と方法も違います。
W 3 Cでイベントオブジェクトの属性と方法
属性/方法 タイプ 読みます 説明
bubbles ボロア 読み取り専用 事件が泡を吹いているかどうかを示す。
キャンセルケーブル ボロア 読み取り専用 イベントのデフォルトの行動をキャンセルできるかどうかを示します。
currentTarget Element 読み取り専用 そのイベントハンドラは現在イベントを処理しています。
detail インテグ 読み取り専用 イベントに関する詳細情報一般的にローラー情報の値に使用されます。
eventPhite インテグ 読み取り専用 イベントハンドラを呼び出した段階：1はキャプチャ段階、2は処理対象、3は発泡段階を示す。
preventDefault() Function 読み取り専用 イベントのデフォルトをキャンセルします。もしcancenlableの値がtrueであれば、この方法が使えます。
stopPropagation() Function 読み取り専用 イベントのさらなる捕獲または発泡をキャンセルする。bubblesの値がtrueであれば、この方法が使えます。
タージ Element 読み取り専用 イベントの目標
タイプ String 読み取り専用 トリガされるイベントの種類。
ビュー AbstractView 読み取り専用 イベントに関連する抽象的なビュー;事件が発生したwindowの対象と同じです。
IEにおけるイベントオブジェクトの属性
属性 タイプ 読みます 説明
cancel Bubble ボロア 読み書き デフォルトの値はfalseですが、trueに設定すると、イベントの泡がキャンセルされます。
return Value ボロア 読み書き デフォルトの値はtrueですが、falseに設定するとイベントのデフォルトの動作がキャンセルされます。
srcele ment Element 読み取り専用 イベントの目標
タイプ String 読み取り専用 トリガされたイベントのタイプ;
// target srcElement
function getTarget(evt){
var e = evt || window.event;
return e.target || e.srcElement; // DOM ;
}
document.onclick = function(evt){
var target = getTarget(evt);
alert(target);
}イベントフローは、ページからイベントを受信する順序であり、いくつかの要素が重なっている場合は、その中の一つの要素をクリックします。
現在クリックされている要素だけがイベントをトリガするのではなく、クリック範囲に積層されたすべての要素がイベントをトリガします。
イベントフローは2つのモードを含む。
1.事件の泡が立つ
中から外へ一つ一つ触発されます。
2.イベントキャプチャ
外から中へ一つ一つ触発されます。
// ; Netscape ;
// DOM2 ;
document.onclick = function(){
alert(' document');
}
document.documentElement.onclick = function(){
alert(' html');
}
document.body.onclick = function(){
alert(' body');
}
document.getElementById('box').onclick = function(){
alert(' div');
}
document.getElementsByTagName('input')[0].onclick=function(){
alert(' input');
}
// PS: input document;
//
function stopPro(evt){
var e = evt || window.event;
// cancelBubble, IE , true ;
// W3C stopPropagation();
window.event ? e.cancelBubble = true : e.stopPropagation();
}