给一个 dom 同时绑定两个点击事件,一个用捕获,一个用冒泡,说下会执行几次事件,然后会先执行冒泡还是捕获?

JavaScript-父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序
事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段、有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发。如果你想细致了解JavaScript中的事件发生,请慢慢阅读。

  1. 原生事件的发生顺序
    一般来讲,当为一个a标签添加click事件以后,点击这个标签,会先执行绑定的事件、后跳转页面。一个input绑定blur事件以后,你在input里输入完内容,点击提交按钮,会先发生blur事件,后发生click事件。当然,这是一般来讲。我在一个React项目中曾经发生表单提交时,先发生click事件,blur事件没有来得及发生,造成表单内容没有检验就提交到后台,原因我至今没有找到,解决办法是在click事件上加一个50ms的延迟。

  2. 自定义事件
    JavaScript中也支持手动触发事件,请看下面代码。


a.addEventListener('click', function(){
        console.log(input.value);
        console.log(this.getAttribute('href'));
        console.log(location.href);
    }, false); //a是我已经通过id获得好的一个a标签

     var event = document.createEvent('HTMLEvents'); // initEvent接受3个参数: 事件类型,是否冒泡,是否阻止浏览器的默认行为
    event.initEvent('click', true, true);    
    event.eventType = 'click'; 
    //触发a上绑定的自定义事件   
    a.dispatchEvent(event);

//注:jQuery中有更简单的trigger()方法实现自定义事件功能

JavaScript中自定义事件的类型有(即document.createEvent(‘HTMLEvents’)中的参数):

  1. UIEvents:一般化的UI事件。
  2. MouseEvents:一般化的鼠标事件。
  3. MutationEvents:一般化的DOM变动事件。
  4. HTMLEvents:一般化的HTML事件。
    自定义事件的发生比较容易控制,你什么时候触发(dispatchEvent/fireEvent)它,它就什么时候发生。

3.绑定多个事件,且由用户行为触发
这个情况最复杂,也是标题中的情况:父元素与子元素都绑定多个事件,且有的事件在捕获阶段、有的事件在冒泡阶段。

下面这个例子,父元素div绑定两个事件(一个冒泡阶段、一个捕获阶段),子元素也是这种情况。事件触发顺序如何。

    var btn = document.querySelector('button');
        var div = document.querySelector('div');

        btn.addEventListener('click', function(){
            console.log('bubble','btn');
        },false);
        btn.addEventListener('click', function(){
            console.log('capture','btn');
        },true);

        div.addEventListener('click', function(){
            console.log('bubble','div');
        },false);
        div.addEventListener('click', function(){
            console.log('capture','div');
        },true);

执行结果:
这里写图片描述
乍一看这个结果有些乱,但仔细分析可以得出结论:
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个三层嵌套盒子的示例代码,它演示了事件流的感知。 HTML 代码: ```html <div id="outer"> <div id="middle"> <div id="inner"></div> </div> </div> ``` CSS 代码: ```css #outer { width: 300px; height: 300px; background-color: #eee; padding: 20px; } #middle { width: 80%; height: 80%; background-color: #ccc; padding: 20px; } #inner { width: 80%; height: 80%; background-color: #aaa; padding: 20px; } ``` JavaScript 代码: ```javascript // 获取 DOM 对象 var outer = document.getElementById('outer'); var middle = document.getElementById('middle'); var inner = document.getElementById('inner'); // 绑定事件处理函数 outer.addEventListener('click', function(event) { console.log('outer clicked'); }, false); middle.addEventListener('click', function(event) { console.log('middle clicked'); }, false); inner.addEventListener('click', function(event) { console.log('inner clicked'); }, false); ``` 在上面的代码中,我们首先获取了三个 DOM 对象 `outer`、`middle` 和 `inner`,然后分别为它们绑定一个点击事件的处理函数。当用户点击每个盒子时,控制台将输出相应的事件消息。 在事件处理函数中,我们将第三个参数 `useCapture` 设置为 `false`,这表示我们使用事件冒泡模式。这意味着当用户点击 `inner` 盒子时,事件将从 `inner` 盒子开始向外传播,依次经过 `middle` 和 `outer` 盒子,最终到达 `document` 对象。在传播过程中,每个盒子都将触发自己的点击事件处理函数。 如果我们将 `useCapture` 设置为 `true`,这表示我们使用事件捕获模式。这意味着当用户点击 `inner` 盒子时,事件将从 `outer` 盒子开始向内传播,依次经过 `middle` 和 `inner` 盒子,最终到达目标元素 `inner` 盒子。在传播过程中,每个盒子都将触发自己的点击事件处理函数。 事件流的默认模式是事件冒泡模式。在大多数情况下,我们都应该使用事件冒泡模式。但在某些特定场景下,我们可能需要使用事件捕获模式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值