美文网首页
JS事件冒泡和事件捕捉

JS事件冒泡和事件捕捉

作者: 2019吖 | 来源:发表于2018-12-04 15:35 被阅读0次

子标签和父标签都绑定事件,点击子标签,先触发子的绑定事件,再触发父的绑定事件,叫做事件冒泡

反之,先触发父,后触发子,叫做事件捕捉

事件捕捉通过以下的第三个参数来设置,true为事件捕捉,false为事件冒泡,默认是false。

document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被触发,"+e.target.id); },true)

W3C使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。IE则是使用e.cancelBubble = true。

W3C使用event.preventDefault()可以取消默认事件。IE则是使用e.returnValue = false。

事件委托利用事件的冒泡原理来实现的,事件从最深的节点开始,然后逐步向上传播事件。

1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度,减少内存的占用。

2、动态的添加DOM元素,不需要因为元素的改动而修改事件绑定。

事件委托把事件绑定到父组件上,然后用浏览器的事件ev获取他的属性target,这个target是事件目标节点,它有个属性叫nodeName,以此来获取子标签名,从而处理操作。

讲的非常好的事件冒泡事件捕捉事件委托

相关文章

  • JS事件冒泡和事件捕捉

    子标签和父标签都绑定事件,点击子标签,先触发子的绑定事件,再触发父的绑定事件,叫做事件冒泡。 反之,先触发父,后触...

  • JS事件相关基础

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

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

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

  • (Web) 事件冒泡和事件捕捉

    当一个事件发生在具有父元素的元素上,现代浏览器会运行两个不同的阶段,捕获阶段和冒泡阶段,二者是相反的流程。 捕获阶...

  • DOM Event

    DOM Event 事件流 事件流分为三个阶段:事件捕捉,目标触发,事件冒泡 事件捕捉 注册事件类型发生后,从ht...

  • 图解事件委托

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

  • 关于js事件冒泡、阻止事件冒泡

    关于js事件冒泡、阻止事件冒泡 一、事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什...

  • 事件冒泡(阻止冒泡)和事件捕捉(阻止捕获)

    很多朋友私聊问我怎么阻止事件冒泡,不懂事件冒泡和事件捕捉的童鞋看过来了,小编今天就来给大家讲解一下。 我们先来简单...

  • 事件冒泡(阻止冒泡)和事件捕捉(阻止捕获)

    原理 : DOM事件流(event flow ): 存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件...

  • 事件基础(2)

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

网友评论

      本文标题:JS事件冒泡和事件捕捉

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