DOMイベントキャプチャとバブルカスタムイベント
DOMイベント小計基本概念:DOMイベントのレベル DOMイベントモデル キャプチャ 発泡 DOMイベントフロー キャプチャ==>ターゲットフェーズ==>バブル は、DOMイベントキャプチャの具体的な流れ を記述する.
特定のフローのキャプチャ(バブルの逆) window ===> document ===> html ===> body ===> ...ターゲット要素 取得プロセスのデモ: Eventオブジェクトの一般的なアプリケーション event.preventDefault()デフォルトイベント をブロック event.stopPropagation()発泡防止 event.stopImmediatePropagation()イベント応答優先度 event.CurrentTargetは、トリガイベントを引き起こす要素 を指す. event.targetイベントバインド要素 カスタムイベント(シミュレーションイベント)
DOM0: element.onclick = function(){} DOM2: element.addEventListener('click',function(){},false) DOM3: element.addEventListener('keyup',function(){},false) 特定のフローのキャプチャ(バブルの逆)
//body id ev div，
var ev = document.getElementById('ev')
window.addEventListener('click',function(){
console.log('window captrue');
},true)//true ，false
document.addEventListener('click',function(){
console.log('document captrue');
},true)
document.documentElement.addEventListener('click',function(){
console.log('html captrue');
},true)
document.body.addEventListener('click',function(){
console.log('body captrue');
},true)
ev.addEventListener('click',function(){
console.log('ev captrue');
},true)
// id ev div，
window captrue
document captrue
html captrue
body captrue
ev captrue
//
var eve = new Event('custome');
element.addEventListener('custome',function(){
console.log('custome');
});
element.dispatchEvent(eve);
// eve custome