事件傳播機制-事件捕獲-事件-冒泡-事件委託
阿新 • • 發佈：2021-07-30
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
.box{
box-sizing:border-box;
margin:20pxauto;
padding-top:20px;
width:300px;
height:300px;
background:lightblue;
}
.outer{
box-sizing:border-box;
margin:0auto;
padding-top:20px;
width:200px;
height:200px;
background:lightcoral;
}
.inner{
margin:0auto;
width:100px;
height:100px;
background:lightgoldenrodyellow;
}
</style>
</head>
<body>
<divclass="box">box
<divclass="outer">outer
<divclass="inner">inner</div>
</div>
</div>
<script> letbox=document.querySelector('.box'), outer=document.querySelector('.outer'), inner=document.querySelector('.inner');
/** *DOM0級繫結中給元素事件繫結的方法，都是在目標階段=》冒泡階段觸發的 *從裡往外inner=》outer=>box */ //inner.onclick=function(ev){ //console.log('inner=>',ev); //}
//outer.onclick=function(ev){ //console.log('outer=>',ev); //}
//box.onclick=function(ev){ //console.log('box=>',ev); //}
//document.body.onclick=function(ev){ //console.log('body=>',ev); //}
/** *DOM2級繫結中給元素事件繫結的方法，都是在捕獲階段觸發的 *+預設是false冒泡階段觸發從裡往外inner=》outer=>box *+設定為true捕獲階段觸發從外往裡box=》outer=>inner */
//inner.addEventListener('click',function(ev){ //console.log('inner=>',ev); //},true)
//outer.addEventListener('click',function(ev){ //console.log('outer=>',ev); //},true)
//box.addEventListener('click',function(ev){ //console.log('box=>',ev); //},true)
//inner.onclick=function(ev){ ////阻止冒泡 ////ev.stopPropagation?ev.stopPropagation():ev.cancelBubble(); //ev.stopPropagation(); //console.log('inner=>',ev); //}
//outer.onclick=function(ev){ //ev.stopPropagation(); //console.log('outer=>',ev); //}
//box.onclick=function(ev){ //ev.stopPropagation(); //console.log('box=>',ev); //}
//document.body.onclick=function(ev){ //ev.stopPropagation(); //console.log('body=>',ev); //}
//-------------------------------------------------- /** *因為點選事件行為存在冒泡傳播機制，所以不論點選box、outer、inner，最後都會 *傳遞到body上,觸發body的click點選事件行為,把為其繫結的方法執行 * *在方法執行接收到的事件物件中，有一個target/srcElement屬性(事件源),可以知道當前點選的是誰,此時 *方法中可以根據事件源的不同，做不同的處理 *這就是“事件委託/事件代理”:利用事件的冒泡傳播機制，可以把一個容器中所有後代元素的某個 *事件行為觸發要做的操作，委託給當前容器的某個事件行為,後期只要觸發任意後代元素，在方法執行的時候， *基於事件源做不同的處理 *+效能高 *+可以操作動態繫結的元素 *+某些需求必須基於它完成 *+... **/ document.body.onclick=function(ev){ //console.log(ev); lettarget=ev.target, tgrgetClass=target.className; //console.log(tgrgetClass);//inner if(tgrgetClass==="inner"){ console.log('inner'); return; }elseif(tgrgetClass==="outer"){ console.log('outer'); return; }elseif(tgrgetClass==="box"){ console.log('box'); return; } }
</script> </body> </html> 我是Eric,手機號是13522679763
<script> letbox=document.querySelector('.box'), outer=document.querySelector('.outer'), inner=document.querySelector('.inner');
/** *DOM0級繫結中給元素事件繫結的方法，都是在目標階段=》冒泡階段觸發的 *從裡往外inner=》outer=>box */ //inner.onclick=function(ev){ //console.log('inner=>',ev); //}
//outer.onclick=function(ev){ //console.log('outer=>',ev); //}
//box.onclick=function(ev){ //console.log('box=>',ev); //}
//document.body.onclick=function(ev){ //console.log('body=>',ev); //}
/** *DOM2級繫結中給元素事件繫結的方法，都是在捕獲階段觸發的 *+預設是false冒泡階段觸發從裡往外inner=》outer=>box *+設定為true捕獲階段觸發從外往裡box=》outer=>inner */
//inner.addEventListener('click',function(ev){ //console.log('inner=>',ev); //},true)
//outer.addEventListener('click',function(ev){ //console.log('outer=>',ev); //},true)
//box.addEventListener('click',function(ev){ //console.log('box=>',ev); //},true)
//inner.onclick=function(ev){ ////阻止冒泡 ////ev.stopPropagation?ev.stopPropagation():ev.cancelBubble(); //ev.stopPropagation(); //console.log('inner=>',ev); //}
//outer.onclick=function(ev){ //ev.stopPropagation(); //console.log('outer=>',ev); //}
//box.onclick=function(ev){ //ev.stopPropagation(); //console.log('box=>',ev); //}
//document.body.onclick=function(ev){ //ev.stopPropagation(); //console.log('body=>',ev); //}
//-------------------------------------------------- /** *因為點選事件行為存在冒泡傳播機制，所以不論點選box、outer、inner，最後都會 *傳遞到body上,觸發body的click點選事件行為,把為其繫結的方法執行 * *在方法執行接收到的事件物件中，有一個target/srcElement屬性(事件源),可以知道當前點選的是誰,此時 *方法中可以根據事件源的不同，做不同的處理 *這就是“事件委託/事件代理”:利用事件的冒泡傳播機制，可以把一個容器中所有後代元素的某個 *事件行為觸發要做的操作，委託給當前容器的某個事件行為,後期只要觸發任意後代元素，在方法執行的時候， *基於事件源做不同的處理 *+效能高 *+可以操作動態繫結的元素 *+某些需求必須基於它完成 *+... **/ document.body.onclick=function(ev){ //console.log(ev); lettarget=ev.target, tgrgetClass=target.className; //console.log(tgrgetClass);//inner if(tgrgetClass==="inner"){ console.log('inner'); return; }elseif(tgrgetClass==="outer"){ console.log('outer'); return; }elseif(tgrgetClass==="box"){ console.log('box'); return; } }
</script> </body> </html> 我是Eric,手機號是13522679763