当前位置: 首页 > 编程笔记 >

JS中事件冒泡和事件捕获介绍

鞠边浩
2023-03-14
本文向大家介绍JS中事件冒泡和事件捕获介绍,包括了JS中事件冒泡和事件捕获介绍的使用技巧和注意事项,需要的朋友参考一下

谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

1、冒泡事件:

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

html:

<div>
 <input type="button" value="测试事件冒泡" />
</div>

js:

  var $input = document.getElementsByTagName("input")[0];
   var $div = document.getElementsByTagName("div")[0];
   var $body = document.getElementsByTagName("body")[0];
 
   $input.onclick = function(e){
      this.style.border = "5px solid red"
      var e = e || window.e;
      alert("red")
   }
   $div.onclick = function(e){
      this.style.border = "5px solid green"
      alert("green")
   }
   $body.onclick = function(e){
      this.style.border = "5px solid yellow"
      alert("yellow")
   }

效果:依次弹出”red“,"green","yellow"。这就是事件冒泡:触发button这个元素,却连同父元素绑定的事件一同触发。

2、阻止事件冒泡

如果对input的事件绑定改为:

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

这个时候只会弹出”red“,因为阻止了事件冒泡。

3、事件捕获:

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

$input.addEventListener("click", function(){
  this.style.border = "5px solid red";
  alert("red")
}, true)
$div.addEventListener("click", function(){
  this.style.border = "5px solid green";
  alert("green")
}, true)
$body.addEventListener("click", function(){
  this.style.border = "5px solid yellow";
  alert("yellow")
}, true)

这个时候依次弹出”yellow“,"green","red"。这就是事件的捕获。 

如果把addEventListener方法的第三个参数改成false,则表示只在冒泡的阶段触发,弹出的依次为:”red“,"green","yellow"。这是因为在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

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

ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 主要内容:事件捕获,事件冒泡,阻止事件捕获和冒泡,阻止默认操作在 JavaScript 中,我们将事件发生的顺序称为“事件流”,当我们触发某个事件时,会发生一些列的连锁反应,例如有如下所示的一段代码: 如果给每个标签都定义事件,当我们点击其中的 标签时,会发现绑定在 和 标签上的事件也被触发了,这到底是为什么呢?为了解答这一问题,微软和网景两公司提出了两种不同的概念,事件捕获与事件冒泡: 事件捕获:由微软公司提出,事件从文档根节点(Document 对象)流

  • 本文向大家介绍js事件冒泡、事件捕获和阻止默认事件详解,包括了js事件冒泡、事件捕获和阻止默认事件详解的使用技巧和注意事项,需要的朋友参考一下 谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 1.事件冒泡 先来看一段代码: html代码 你的本意是触发button这个元素,却连同父元素绑定的事件一同触发。这就是事件冒泡。 如

  • 本文向大家介绍浅谈javascript中的事件冒泡和事件捕获,包括了浅谈javascript中的事件冒泡和事件捕获的使用技巧和注意事项,需要的朋友参考一下 1.事件冒泡   IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。以下面的HTML 页面为例: 如果你单击了页面中的<div

  • 问题内容: 事件冒泡和捕获之间有什么区别?什么时候应该使用冒泡与捕获? 问题答案: 事件冒泡和捕获是HTML DOM API中事件传播的两种方式,当事件发生在另一个元素内部的元素中,并且两个元素都已注册了该事件的句柄时。事件传播模式确定元素以什么顺序接收事件。 冒泡时,事件首先由最内层元素捕获和处理,然后传播到外层元素。 通过捕获,事件首先被最外面的元素捕获并传播到内部元素。 捕获也称为“滴答”,

  • 注意 目前仅 Weex Native(Android 和 iOS)支持,web 端 暂时不支持此项特性. 如果你是个 web 开发者,你大概对浏览器事件冒泡机制已经很熟悉了,而且可能认为 Weex 默认会支持事件冒泡。然而,Weex 在 0.13 之前是不支持这一特性的,在 0.13 版本,Weex 提供了这项支持。 概念 以点击事件为例,比如一个点击事件发生在某个 <video> 元素上,这个元

  • 本文向大家介绍如何让事件先冒泡后捕获?相关面试题,主要包含被问及如何让事件先冒泡后捕获?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 在DOM标准事件模型中,是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果,对于同一个事件,监听捕获和冒泡,分别对应相应的处理函数,监听到捕获事件,先暂缓执行,直到冒泡事件被捕获后再执行捕获之间。