## 事件捕获、事件冒泡、事件委托 ### 事件冒泡（由内到外） 当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。 ~~~ <div> <p></p> </div> ~~~ ~~~ var p = document.getElementsByTagName("p")[0]; p.onclick = function () { alert("p"); } var div = document.getElementsByTagName("div")[0]; div.addEventListener("click",function(){ alert("div"); }) ~~~  ### 事件捕获（由外到内） 点击子元素，父元素先被触发，然后再触发子元素；点击父元素，子元素不被触发。 ``` <div> <p></p> </div> ``` ``` <script> document.getElementsByTagName("p")[0].addEventListener('click', function (e) { alert('p-捕获'); }, true); document.getElementsByTagName("div")[0].addEventListener('click', function (e) { alert('div-捕获'); }, true); </script> ```  ### 事件委托