事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
DOM事件分为三个阶段:
捕获阶段当前目标阶段冒泡阶段注意:
JS代码中只能执行捕获或者冒泡其中的一个阶段onclick 和 attachEvent(ie) 只能得到冒泡阶段捕获阶段:如果addEventListener 的第三个参数为true 则为捕获阶段,参数为false或者省略 则为冒泡阶段实际开发中很少使用事件捕获,我们更关注事件冒泡有些事件是没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseleavedocument->html->->body->father->son,
因此下面的代码会先弹出father再弹出son
<body> <div class="father"> <div class="son"></div> </div> <script> var son = document.querySelector(".son"); son.addEventListener( "click", function () { alert("son"); }, true ); var father = document.querySelector(".father"); son.addEventListener( "click", function () { alert("father"); }, true ); </script> </body>冒泡阶段:如果addEventListener 的第三个参数为false或者省略 则为冒泡阶段 son->father->body->html->document 因此下面的代码会先弹出son再弹出father最后弹出document
var son = document.querySelector(".son"); son.addEventListener( "click", function () { alert("son"); }, false ); var father = document.querySelector(".father"); son.addEventListener( "click", function () { alert("father"); }, false ); document.addEventListener("click", function () { alert("document"); });