XM的小窝


 

Javascript之DOM事件流

DOM事件流

DOM事件流

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止。
DOM事件流分为两个部分,一是事件捕获,二是事件冒泡

以生活中的简单现象为例,如果把石头称作为DOM事件,而把石头扔进水里,下沉的过程就称之为事件捕获,下沉到底时,石头附近会冒出泡泡,泡泡的方向竖直向上,冒泡的过程就称作为事件冒泡

代码演示

html及样式

 <style>
        .father {
            box-sizing: border-box;
            width: 500px;
            height: 500px;
            padding: 100px;
            background-color: skyblue;
        }
        .son {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
<div class="father">
        <div class="son"></div>
    </div>

事件捕获

var father = document.querySelector(".father");
var son = document.querySelector(".son");
// // 以捕获方式绑定事件,第三个参数为true
father.addEventListener("click", function() {
    alert("father");
}, true);
son.addEventListener("click", function() {
    alert("son");
}, true);

事件冒泡

//此事件点击son盒子首先弹出
var father = document.querySelector(".father");
var son = document.querySelector(".son");
//以冒泡方式绑定事件,第三个参数为false
father.addEventListener("click", function() {
    alert("father");
}, false);
son.addEventListener("click", function() {
    alert("son");
}, false);

事件捕获的执行结果:先弹出father 再弹出son
事件冒泡的执行结果:先弹出son 再弹出father

P.S 在实际应用中,事件冒泡的运用场景更多,更灵活
但有些事件是没有冒泡的,比如onblur onfocus onmouseover onmouseleave等

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注