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("xx").onclick=function(){
- var p = document.createElement("p");
- p.innerHTML="333";
- document.getElementById("btn").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="200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
- <div id="id2" style="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>