前端JavaScript

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

2020-04-16  本文已影响0人  晚月川

DOM事件流

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

  • 事件发生时会在元素节点之间按照特定的顺序传播,这个传播的过程DOM事件流
  • DOM事件流分为三个阶段
    • 捕获阶段
    • 当前目标阶段
    • 冒泡阶段
DOM事件流.png
  • 事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播,到DOM最顶层节点的过程
  • 事件捕获:网景最早提出,由DOM最顶层结点开始,然后逐级向下传播,到最具体的元素接收的过程
实例.png

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

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

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

<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>
上一篇下一篇

猜你喜欢

热点阅读