我的编程空间,编程开发者的网络收藏夹
学习永远不晚

js事件冒泡与事件捕获的示例分析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

js事件冒泡与事件捕获的示例分析

这篇文章给大家分享的是有关js事件冒泡与事件捕获的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

(一)事件绑定

1.普通事件绑定

给html添加一个以on开头的特定的属性(如onclick,onfocus);

<button id="A" onclick="alert(this.id)">方式一</button>

<button id="A" onclick="handler(this)">方式二</button>
<script>
 function handler(btn){
 alert(this.id); //undefined this指向window对象
 alert(btn.id); //A 
 }
</script>
<button id="A">方式三</button>
<script>
 var btn = document.getElementById("A");
 btn.onclick = function(){
 alert("1:"+this.id);
 }
 btn.onclick = function(){
 alert("2:"+this.id);
 }
 //只能绑定一个事件处理函数,后面的会覆盖前面的;
</script>

2.符合W3C标准的事件绑定(addEventListener和removeEventListener)

target.addEventListener(type, listener[, useCapture]);

type:必须,表示监听事件类型的字符串;

listener:必须,当所监听的事件类型触发时,会接收到一个事件通知对象;listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数;

useCapture:可选,Boolean,默认为false,表示事件传播方式为事件冒泡;true,表示事件传播方式为事件捕获;

(事件捕获与事件冒泡下面有讲到)

这两个函数Firefox和Chrome都支持,IE9及以后也支持这两个函数;IE使用attachEvent/detachEvent来进行事件绑定和取消;

<button id="B">W3C标准一</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B this指向的是dom对象; attachEvent指向的是window对象
 }
</script>
<button id="B">W3C标准二</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,true);
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B
 }
 //当点击按钮时,函数handler会执行2次,一次为事件捕获,一次为事件冒泡;
 //如果绑定的是同一个事件处理函数,且都是事件捕获或都是事件冒泡,那么只能绑定一次;
</script>

3.IE浏览器使用attachEvent/detachEvent进行事件绑定与取消

<button id="C">IE</button>
<script>
 var btn = document.getElementById("C");
 btn.attachEvent("click",handler);
 function handler(){
 alert(this.id); //undifined this指向的是window对象; addEventListener指向的是dom对象
 }
</script>

注:同一个事件处理函数只能绑定一次;不同的函数对象可以重复绑定不会覆盖;匿名函数和匿名函数即使代码完全一样,也是互相不相同的;

(二)事件捕获与事件冒泡

<div id="A">
 <div id="B">
 <div id="C"></div>
 </div>
</div>

事件捕获:就是从最外层到目标对象的顺序触发(如上面的代码,如果点击C,它的触发顺序为A→B→C)

事件冒泡:就是从目标对象到外层的顺序触发(如果点击C,它的触发顺序为C→B→A)

DOM事件流:就是支持两种事件模型,捕获型事件和冒泡型事件,捕获型事件先发生;两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

图片来自网络:

js事件冒泡与事件捕获的示例分析

<div id="A" >
 <div id="B" >
 <div id="C" ></div> 
 </div>
</div>
<script>
 var A = document.getElementById("A"); 
 var B = document.getElementById("B"); 
 var C = document.getElementById("C"); 
 // 目标(目标阶段的处理函数,先注册先执行)
 C.addEventListener('click',function(){alert("Ct");},true);
 C.addEventListener('click',function(){alert("Cf");},false);
 // 事件冒泡
 A.addEventListener('click',function(){alert("Af");},false);
 B.addEventListener('click',function(){alert("Bf");},false);
 // 事件捕获
 A.addEventListener('click',function(){alert("At");},true);
 B.addEventListener('click',function(){alert("Bt");},true); 
</script>
//当点击C时(蓝色),输出At Bt Ct Cf Bf Af

阻止事件的传播:

• 在W3c中,使用stopPropagation()方法

• 在IE下设置cancelBubble = true;

阻止事件的默认行为:

• 在W3c中,使用preventDefault()方法;

• 在IE下设置window.event.returnValue = false;

感谢各位的阅读!关于“js事件冒泡与事件捕获的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

js事件冒泡与事件捕获的示例分析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript事件捕获冒泡分析

本篇内容主要讲解“JavaScript事件捕获冒泡分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript事件捕获冒泡分析”吧!一、事件流JavaScript中,事件流指的是DOM
2023-06-25

如何理解 JavaScript 事件冒泡与捕获?(JavaScript 事件冒泡与捕获怎样理解)

在JavaScript中,事件冒泡与捕获是两个重要的概念,它们决定了事件在DOM树中传播的顺序。理解这两个概念对于高效处理DOM事件非常重要。一、事件冒泡(EventBubbling)事件冒泡是指当一个元素触发某个
如何理解 JavaScript 事件冒泡与捕获?(JavaScript 事件冒泡与捕获怎样理解)
Java2024-12-22

JavaScript 事件冒泡与捕获的特点分别是什么?(JavaScript 事件冒泡与捕获有何特点)

在JavaScript中,事件冒泡(EventBubbling)和事件捕获(EventCapturing)是两种不同的事件传播机制,它们在处理事件时有着不同的特点。一、事件冒泡(EventBubbling)事件冒泡是指
JavaScript 事件冒泡与捕获的特点分别是什么?(JavaScript 事件冒泡与捕获有何特点)
Java2024-12-17

JavaScript 事件冒泡与捕获各自有哪些优势?(JavaScript 事件冒泡与捕获啥优势)

在JavaScript中,事件冒泡(EventBubbling)和事件捕获(EventCapturing)是处理事件传播的两种不同机制。它们在不同的场景下都有各自的优势,下面我们来详细探讨一下。一、事件冒泡事件冒泡是指事
JavaScript 事件冒泡与捕获各自有哪些优势?(JavaScript 事件冒泡与捕获啥优势)
Java2024-12-20

在 JavaScript 中怎样实现事件的冒泡与捕获?(JavaScript中如何实现事件的冒泡与捕获)

在JavaScript中,事件冒泡(EventBubbling)和事件捕获(EventCapturing)是处理事件在DOM树中传播的两种不同机制。理解和掌握这两种机制对于高效地处理DOM事件非常重要。一、事件冒泡
在 JavaScript 中怎样实现事件的冒泡与捕获?(JavaScript中如何实现事件的冒泡与捕获)
JavaScript2024-12-17

JavaScript 事件冒泡与捕获究竟能解决哪些问题?(JavaScript 事件冒泡与捕获能解决啥)

在JavaScript中,事件冒泡与捕获是两个重要的概念,它们在处理DOM事件时起着关键作用。了解事件冒泡与捕获能帮助开发者更好地控制事件的传播和处理,从而实现更复杂的交互效果。一、事件冒泡(EventBubbling)
JavaScript 事件冒泡与捕获究竟能解决哪些问题?(JavaScript 事件冒泡与捕获能解决啥)
Java2024-12-18

编程热搜

目录