js委托事件-addEventListeners（冒泡方向）

JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。

实例：

给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx");

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6. </head>  
  7. <body>  
  8. <div id="div">  
  9.    <p>11111</p>  
  10.     <p>2222</p>  
  11. </div>  
  12. <button id="btn">xxxx</button>  
  13. <script>  
  14.     document.getElementById("div").addEventListener("click",function(e){  
  15.         if(e.target.nodeName=="P"){  
  16.             alert("xxx")  
  17.         }  
  18.     })  
  19.     document.getElementById("xx").onclick=function(){  
  20.         var p = document.createElement("p");  
  21.         p.innerHTML="333";  
  22.         document.getElementById("btn").appendChild(p);  
  23.     }  
  24. </script>  
  25. </body>  
  26. </html>  


冒泡方式分为2种，一种是由子元素向上冒泡，一种是由父元素向下冒泡

 

在使用addEventListeners的时候有第三个参数true和flase；默认是flase，由子元素向上冒泡

当我们设置为true的时候就会由父元素向下冒泡

实例：

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Title</title>  
    6. </head>  
    7. <body>  
    8. <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">  
    9.     <div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div>  
    10. </div>  
    11. <script>  
    12.     document.getElementById("id1").addEventListener('click',function(){  
    13.         console.log("id1");  
    14.     },true)  
    15.     document.getElementById("id2").addEventListener('click',function(){  
    16.         console.log("id2");  
    17.     },true)  
    18. </script>  
    19. </body>  
    20. </html> 
posted @ 2017-02-28 10:02  疯子110  阅读(692)  评论(0)  编辑  收藏  举报