事件冒泡和事件捕获

最新推荐文章于 2023-11-01 10:58:14 发布
最新推荐文章于 2023-11-01 10:58:14 发布
阅读量172 收藏
点赞数
分类专栏： javaScript基础 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46926371/article/details/125859057
版权

事件冒泡和事件捕获

事件冒泡

必要条件:

  1. 一定要有事件，而且是同样的事情

  2. 必须有标签的嵌套

概念：

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有

祖先元素中依次被触发,这一过程被称为事件冒泡；

这个事件从原始元素开始一直冒泡到DOM树的最上层

冒泡顺序
冒泡顺序
IE 6.0: 
div -> body -> html -> document
其他浏览器: 
div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
演示
btn.addEventListener("click",handle,false);
最后一个参数为false-事件冒泡
大多数浏览器都支持-推荐使用的方式

在这里插入图片描述

事件委托

概念：

事件委托是对"事件处理程序过多"问题的一种解决方案。

它是利用了事件冒泡，只指定一个事件处理，就可以用来管理某一类型的所有事件

例如：

click事件会一直冒泡 到document层次。

也就是说，我们可以为整个页面指定一个onclick事件处理，而不必给每个可单击的元素分别添加 事件处理程序。

<body>
<ul>
  <li>这是第1个li标签</li>
  <li>这是第2个li标签</li>
  <li>这是第3个li标签</li>
  <li>这是第4个li标签</li>
  <li>这是第5个li标签</li>
  <li>这是第6个li标签</li>
</ul>
</body>
<script>
  var ul = document.getElementsByTagName("ul")[0];
  var lis = ul.children;

// 之前的事件注册
//    for(var i=0;i<lis.length;i++){
//        lis[i].onclick = function (){
//          console.log(this.innerHTML);
//        }
//      }

// 现在的事件委托方式注册
  ul.onclick = function (e){
//        console.log(this.innerHTML);
//        console.log(e.target);  // 表示事件的最最原始的事件源头对象,不会因为冒泡而改变
      console.log(e.target.innerHTML);
   }
</script>

事件委托的好处:

  • document对象很快就可以访问,而且可以在页面生命周期的任何时点上为它添加事件处理程序 (无需等待DOMContentLoaded或Load事件)。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。

  • 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。

  • 整个页面占用的内存空间更少，能够提升整体性能。

注意：

最适合采用事件委托技术的事件包括：click,mousedown,mouseup,keydown,keyup和keyexpress.

阻止事件冒泡

  • w3c的方法是event.stopPropagation()

  • IE则是使用event.cancelBubble = true

代码如下：
function stopPropagation(event){
  if(event && event.stopPropagation){
   // 浏览器能力检测：就是要看当前的浏览器是否支持此对象的属性或是方法,
   // 如果支持就能够使用，如果不支持就不能够使用
        event.stopPropagation();
  }else{
        event.cancelBubble = true;
  }
}
注册事件的另一种方式

on的缺点：对于同一事件源对象，不能注册多个相同的事件，因为后面的事件会将前面的事件给覆盖。

addEventListener：高级浏览器支持的方式

attachEvent：IE8及之前的低版本浏览器支持的方式

事件捕获

解释:

与事件冒泡刚好相反。

说明

btn.addEventListener("click",handle,true);
最后一个参数为true-事件捕获
老版本的浏览器不支持-不推荐使用

在这里插入图片描述

事件的三个阶段

1.捕获阶段

2.目标阶段 执行当前对象的事件处理程序

3.冒泡阶段

在这里插入图片描述

事件目标

获取事件目标的不同方式

  • event.target – 火狐谷歌等浏览器

  • event.srcElement – IE678

  • this – 各浏览器都支持

buildkay
关注
专栏目录
关于事件冒泡和事件捕获
BIGDgreen
01-31 964
这里写自定义目录标题什么是事件事件流事件冒泡和事件捕获的概念事件冒泡事件捕获事件冒泡示例事件捕获示例阻止冒泡方法一方法二（jQuery，同时会阻止默认事件） 什么是事件 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互就是通过事件实现的。可以用侦听器或处理程序来预定事件，以便事件发生时执行相应的代码。 事件流 事件流描述的是从页面接收事件的顺序。 为什...
JS中事件冒泡和事件捕获介绍
11-27
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。 1、冒泡事件： 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclic
事件冒泡与事件捕获详解
星河梦~的博客
07-21 4892
事件流 概念 首先，我们来了解一下什么是事件流。 事件流：当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播， 这个过程称之为事件流。 （当页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程称为事件流。） 分类 事件流可分为冒泡型事件流、捕获型事件流。 （1）事件冒泡：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。 查找事件（事件响应）的顺序：文本节点–>元素节点—>body—>html—>document（例如点击事件
冒泡与捕获事件
最新发布
qq_43532275的博客
11-01 1101
addEventListener 的第三个参数 冒泡与捕获事件
事件冒泡和捕获
weixin_58155690的博客
07-17 6223
事件冒泡和捕获
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
10-19
事件触发时序问题中的两个重要概念是事件冒泡（event bubbling）和事件捕获（event capturing）。这两个术语描述了事件流（event flow）在DOM树中的传播顺序。 事件冒泡是指当一个元素上的事件被触发后，该事件会...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
JS html事件冒泡和事件捕获操作示例
01-21
今天学习了事件冒泡和捕获，记录一下。 1.冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 我一般用法就是理解为触发事件A, 会触发A的父亲，爷爷，爷爷的父亲…… 代码： &...
JavaScript基础之冒泡/捕获事件
hangzhang
09-01 202
JavaScript的冒泡事件和捕获事件是每一个前端开发者都会经常遇到的问题。最近遇到这个问题时，发现自己对它们还是一知半解，现在是时候该彻底的弄懂它们了。 1、定义 一个事件发生后，会在子元素和父元素之间传播。这种传播分成三个阶段： 第一阶段：从window对象传导到目标节点（外层传到内层），称为“捕获阶段”。 第二阶段：在目标节点上触发，称为“目标阶段”。 第三阶段：从目标节点传导回window对象（从内层传回外层），称为“冒泡阶段” 2、应用 本文中我们用addEventListener() 方法
事件冒泡和事件捕获详解
qq_42040061的博客
11-20 504
事件冒泡 事件冒泡：DOM 元素触发的一些事件通过 DOM 层级结构传播。这种传播过程称为事件冒泡。事件首先由最内层的元素开始，然后传播到外部元素，直到它们到根元素。 翻译：党DOM元素发生一些事件（例如点击 click），可以向父级传递，由最内层传递到最外层，直到他们的根元素(即document)。 在这里插入代码片 ...
事件冒泡、事件捕获、事件流、阻止浏览器的默认行为、顶级对象window
m0_46270297的博客
04-12 234
一、事件流 // 事件冒泡、事件捕获 // 事件冒泡: 当一个元素的事件触发了，该事件会在当前元素的所有祖先元素中依次来触发（从里到外效果） // 事件捕获：从外到里 // 不要存在以下误区：事件冒泡、事件捕获和元素注册上事件才有关系（错误） // 和注册事件没有关系 // 事件流 // 事件流描述的是从页面中接收事件的顺序。(事件流，事件传播的流程) // 事件发生时会在元素节点之间按照特定的...
解决js中onMouseOut事件冒泡的问题
weixin_30596735的博客
11-20 132
前阵子为BS项目模板做了一个左侧滑动信息栏，效果类似于windows状态栏的自动隐藏效果，鼠标移进滑出，鼠标移出隐藏，浮动时不占用空间，也可以固定住占一块位置。做的过程中遇到一个问题，鼠标在信息栏内部移动时会触发onMouseOut事件，信息栏放在div中，内部有table、img、a等元素，看来是由于事件冒泡，子元素上触发了事件冒泡到了父元素，导致滑动时不断闪动，头晕眼花，于是着手解决问题。在I...
点击事件和事件冒泡
爸ba的博客
03-23 1084
单机事件 onclick双击事件 ondblclick移入事件 onmouseover移出事件 onmouseou进入事件 onmouseenter离开事件 onmouseleave按下事件 onmousedown抬起事件 onmouseup。
简单了解事件冒泡和阻止事件冒泡
D____ppx的博客
03-29 2714
1.什么叫事件冒泡？ 就是在触发事件时候 会一层一层向上冒泡(他同时会触发父类的事件) 2.阻止事件冒泡 意思就是阻止事件向上传递 第一种ie浏览器的阻止事件冒泡 利用了一种属性cancelBubble 设置为true 他也兼容各大浏览器 （不遵守w3c规范 未来这个属性要淘汰） 代码e.cancelBubble = true (强调不建议使用) 第二种stopPropagation这个方法可以阻止事件冒泡 且他遵守w3c规则 （兼容各大浏览器 ie9之前不兼容） 建议写法 if(e.sto
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
weixin_46106512的博客
03-29 5081
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、阻止事件冒泡和默认行为二、拖拽1, 实现拖拽相关的三大事件:2, 实现拖拽思路：1, 给目标元素添加onmousedown事件(鼠标按下事件)2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:3, 在onmousedown事件(鼠标按下事件)发生以后，给document.
【前端面试】何为事件监听？
Milk~每天分享一点点，技术进步一点点
08-24 449
事件监听 addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型(如 “click” 或 “mousedown”) 第二个参数是事件触发后调用的函数 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的 事件传递有两种方式，冒泡和捕获 事件传递定义了元素事件触发的顺序，如果你将P元素插入到div元素中，用
事件冒泡和事件捕获用处
08-17
事件冒泡和事件捕获是指浏览器中处理DOM元素上事件的两种不同方式。它们都是JavaScript事件模型的一部分，用于处理事件。事件冒泡是指事件从最深层的元素逐级向上传播到最外层的元素，而事件捕获则是从最外层的元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值