javascript事件学习(2)
2、事件流
事件流描述的是从页面接受事件的顺序,DOM2事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
第一阶段:事件捕获阶段,从window对象传导到目标节点。
第二阶段:处于目标阶段,在目标节点上触发
第三阶段:事件冒泡阶段,从目标节点传回window对象
用户在点击网页时,浏览器总是默认事件的目标节点是点击位置最深层的元素。
事件各个阶段的触发测试:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的三个阶段</title> </head> <body> <div> <input type="button" value="按钮1"> <input type="button" value="按钮2"> </div> </body> <script> var oBtn = document.getElementsByTagName('input'); var oDiv = document.getElementsByTagName('div'); oBtn[0].addEventListener('click', function() { alert(event.eventPhase); }, false); oDiv[0].addEventListener('click', function() { alert(event.eventPhase); }, false); oBtn[1].addEventListener('click', function() { alert(event.eventPhase); }, true); oDiv[0].addEventListener('click', function() { alert(event.eventPhase); }, true); </script> </html>
常常利用事件冒泡的特性,把子节点的监听函数定义在父节点上,由父节点统一处理多个子节点的事件。这就是事件代理。
var ul = document.querySelector('ul'); ul.addEventListener('click', function() { if(event.target.tagName.toLowerCase() === li) { //some code } })
如果希望事件不再向上传播,可以使用stopPropagation()方法
p.addEventListener('click', function(event) { event.stopPropagation(); })
事件将不会再向p元素的父元素冒泡。但stopPropagation不会阻止p元素上其他的click事件的监听函数,可以使用stopImmediatePropagation方法。