JavaScript学習まとめ5--イベント対象

2385 ワード

私たちがDOM上のあるイベント(onclick、onmouseoverなど)をトリガすると、自動的にイベントオブジェクトイベントが発生します.このオブジェクトには、イベントをトリガするDOM要素、イベントタイプ、その他特定のイベントに関するすべての情報が含まれています.
すべてのブラウザはイベントオブジェクトをサポートしていますが、方法は異なります.
1.DOMのイベント対象
DOM対応のブラウザでイベントオブジェクトをイベントハンドラに取り込みます.
たとえば:
//      
oBtn.addEventListener('click',function(event){
    console.log(event.type);          //click 
},false)
この例のイベントハンドラは、コンソールでイベントのタイプ(event.type)を出力します.この属性には、処罰されたイベントタイプが含まれています.
イベントの種類によっては、イベントの属性や方法が異なりますが、すべてのイベントには以下の属性や方法があります.
属性/方法
タイプ
読みます
説明
bubbles
ボロア
読み取り専用
事件が泡を吹いているかどうかを示す.
キャンセルケーブル
ボロア
読み取り専用
イベントのデフォルトの行動をキャンセルできるかどうかを示します.
currentTarget
Element
読み取り専用
そのイベントハンドラは現在イベントを処理しています.
default Preventted
ボロア
読み取り専用
trueのためにpreventDefaultを呼び出しました.
detail
Interger
読み取り専用
イベントに関する詳細情報
eventPhite
Interger
読み取り専用
イベントハンドラを呼び出した段階1はキャプチャ段階、2は「ターゲット」、3は発泡段階を表します.
preventDefault()
Function
読み取り専用
イベントのデフォルトをキャンセル
stopImmedia tePropagation()
Function
読み取り専用
イベントのさらなる捕獲または発泡をキャンセルします.
stopPropagation()
Function
読み取り専用
イベントのさらなる捕獲または発泡をキャンセルします.
タージ
Element
読み取り専用
事件の狙い
trusted
ボロア
読み取り専用
trueにイベントを表示する時にブラウザで生成されます.falseは人が作ったものです.
タイプ
String
読み取り専用
トリガされたイベントの種類
ビュー
AbstractView
読み取り専用
イベントと関連した抽象的なビューは、イベントが発生したWindowsオブジェクトと同じです.
イベントハンドラの内部では、オブジェクトthisは常にcurrentTargetの値に等しく、targetはイベントの実際のターゲットのみを含む.
//      
oBtn.onclick=function(event){
    console.log(event.currentTarget===this);    //true
    console.log(event.target===this);              //true
}