复习笔记之API(6) DOM事件流

DOM事件流

事件流描述的是从页面中接收事件的顺序(DOM事件流就是事件的传播过程)

• 事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程即DOM事件流
• DOM事件流分为三个阶段
  • 捕获阶段
  • 当前目标阶段
  • 冒泡阶段

DOM事件流.png

• 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播，到DOM最顶层节点的过程
• 事件捕获：网景最早提出，由DOM最顶层结点开始，然后逐级向下传播，到最具体的元素接收的过程

实例.png

JS代码只能执行捕获或者冒泡其中的一个阶段

• onclick和attachEvent只能得到冒泡阶段
• addEvenListener(type, listener, [useCapture])第三个参数如果是true，表示事件捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序

实际开发中很少使用事件捕获，事件冒泡更为常用;
有些事件是没有冒泡的。比如：onblur(获得焦点)、onfocus(失去焦点)、onmouseenter、onmouseleave;

<div class="father">
    <div class="son">子级盒子</div>
</div>
<script>
    // 捕获阶段：如果addEventListener第三个参数是true，则处于捕获阶段(document => html => body => father => son)
    let son = document.querySelector('.son');
    son.addEventListener('click', function() {
        alert('son');
    }, true);
    let father = document.querySelector('.father');
    son.addEventListener('click', function() {
        alert('father');
    }, true);
    // 冒泡阶段：如果addEventListener第三个参数是false或者省略，则处于冒泡阶段(son => father => body => html => document)
    let son = document.querySelector('.son');
    son.addEventListener('click', function() {
        alert('son');
    }, false);
    let father = document.querySelector('.father');
    son.addEventListener('click', function() {
        alert('father');
    }, false);
    document.addEventListener('click', function() {
        alert('document');
    }) // 不写的话默认是false
</script>