js委託事件-addEventListeners（冒泡方向）
阿新 • • 發佈：2019-01-07
JQuery中live()、delegate()、on()事件都能給新增元素繫結事件，原理就是用了事件委託。
例項：
給id為div的元素繫結一個click委託，如果冒泡上來的元素是P元素就會執行alert("xxx");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <p>11111</p> <p>2222</p> </div> <button id="btn">xxxx</button> <script> document.getElementById("div").addEventListener("click",function(e){ if(e.target.nodeName=="P"){ alert("xxx") } }) document.getElementById("btn").onclick=function(){ var p = document.createElement("p"); p.innerHTML="333"; document.getElementById("xx").appendChild(p); } </script> </body> </html>
冒泡方式分為2種，一種是由子元素向上冒泡，一種是由父元素向下冒泡
在使用addEventListeners的時候有第三個引數true和flase；預設是flase，由子元素向上冒泡
當我們設定為true的時候就會由父元素向下冒泡
例項：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4"> <div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div> </div> <script> document.getElementById("id1").addEventListener('click',function(){ console.log("id1"); },true) document.getElementById("id2").addEventListener('click',function(){ console.log("id2"); },true) </script> </body> </html>