美文网首页
js 事件冒泡和事件捕获

js 事件冒泡和事件捕获

作者: 一只章鱼哥 | 来源:发表于2021-01-12 15:51 被阅读0次

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。

事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

1、冒泡事件:

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。例如,当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作,但是父div的onclick事件同样会被触发。

2、阻止事件冒泡

要阻止特定事件的在DOM层次的传播,可以使用stopPropagation()方法来取消进一步的捕获或者冒泡

$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red")
    e.stopPropagation();
}

3、事件捕获

从顶层元素到目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。


我们可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

相关文章

  • vue 阻止事件冒泡,捕获方法

    要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js ...

  • JS事件相关基础

    js事件: 键盘事件: JS中的事件冒泡和事件捕获: 1、事件冒泡。如下代码: 点击button事件,连同父元素绑...

  • 图解事件委托

    事件捕获和事件冒泡 说到事件委托我们就不得不提JS中事件的整个历程中的两个机制:事件捕获和事件冒泡。 然而要说这事...

  • 事件基础(2)

    js事件的三个阶段:捕获,目标,冒泡 IE:IE事件流是事件冒泡流 Netscape事件流是事件捕获流 IE事件...

  • js 阻止冒泡 阻止默认事件

    js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件...

  • 默认事件

    js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件...

  • Javascript 事件代理、冒泡和捕获

    2019开工荒了两天,赶紧开始! 为什么写事件代理、冒泡、捕获,首先冒泡和捕获是js事件的核心基础,事件代理原理来...

  • 事件冒泡和事件捕获

    事件冒泡和事件捕获

  • JS事件冒泡和事件捕获

    谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难...

  • JS事件冒泡和事件捕获

    css部分 JS部分 默认 false , false 是冒泡, true 是事件捕获 事件捕获 假设在box3...

网友评论

      本文标题:js 事件冒泡和事件捕获

      本文链接:https://www.haomeiwen.com/subject/bcheaktx.html