IE与兼容W3C标准浏览器事件冒泡的顺序

最新推荐文章于 2020-09-20 01:22:02 发布
最新推荐文章于 2020-09-20 01:22:02 发布
阅读量1.8k 收藏
点赞数
分类专栏： JavaScript 文章标签： 浏览器 ie c firefox 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee576/article/details/2652976
版权
先说说一向自行其事的IE吧，其没有遵守W3C标准，总是按照自己的那套规则来，它的事件冒泡的顺序为先执行目标元素的事件，然后，事件向外传播到每个祖先元素.

遵守W3C DOM2 标准的浏览器以firefox为例，先执行最外层的祖先元素，然后事件相应地由外向内传播，直至抵达目标元素.

我们在编写js脚本时一定要注意到这点差别!
lee576
关注
专栏目录
W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。
u011719449的专栏
04-15 3619
在准备阿里前端面试的时候看到这么一道题。 一个DOM元素绑定两个事件，一个冒泡，一个捕获，则事件会执行多少次，执行顺序如何。 这导致了我对冒泡和捕获又进一步深入的了解。(永远都在发现自己知识匮乏的日子中度过人生真是好抓急啊。) 首先冒泡和捕获是怎么一回事。 简单点说。冒泡就是从下往上，像鱼吐泡，泡泡是从下往上升的，也就是DOM元素被触法事件时(此时的dom元素为目标元素)，目标元素
W3C DOM 事件模型(简述)
向着全栈前进
04-18 2121
1、事件模型 因为事件捕获与冒泡模型都有其优点和解释，DOM标准支持捕获型与冒泡型，可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象。首先是捕获式传递事件，接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件
前端基本知识（一）：W3C标准&&冒泡事件，捕获事件，W3C DOM对象模型，对比分析...
weixin_30656145的博客
02-11 189
W3C标准是万维网联盟， 其他的可以参考万维网版本的更新内容 一、W3C标准 二、W3C DOM事件 三、冒泡事件 四、捕获事件 五、对比分析 一、W3C标准 其实网页是由三分部组成：1、结构（structure），2、表现（prentation），3、行为（behavior） 对应的标准也分为三部分：1、结构化标准语言，主要包括xml和xhtml；2、表现标准语言，主要包...
IE冒泡机制
github_turboemily的博客
09-20 431
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> #div1{ width:500px; height: 500px; background-color: aqua; }
W3C事件模型中事件捕捉和事件冒泡的执行顺序
weixin_30920513的博客
04-02 270
前两天看到一道面试题说如果给一个DOM元素既添加单击操作的事件捕捉回调函数，也添加事件冒泡的回调函数，问先调用哪一个？ 自己做了一个简单的测试程序进行验证。测试环境：chrome:Version 33.0.1750.154 m <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> ...
javascript阻止事件冒泡和浏览器的默认行为
10-20
通过上述内容的介绍，可以看出，虽然`stopPropagation()`和`preventDefault()`提供了一种标准方式来处理事件冒泡和默认行为，但在不同的浏览器中，仍需要考虑兼容性问题，特别是旧版的IE浏览器。上述代码展示了兼容...
Javascript Event（事件）的传播与冒泡
11-27
JavaScript中的事件传播与冒泡是理解DOM交互时的关键概念，主要涉及到事件的处理方式和执行顺序。事件传播是指当一个事件（如点击）在DOM树中发生时，它会从最深的节点（事件的目标节点）开始，逐级向上层节点传播。...
深入理解事件冒泡(Bubble)和事件捕捉(capture)
11-22
这样，无论在IE还是其他遵循W3C标准的浏览器中，都可以有效地阻止事件冒泡。 了解事件冒泡和事件捕捉对于创建高效、可维护的Web应用至关重要。正确处理事件不仅可以提升用户体验，还能避免不必要的计算和资源浪费。...
javascript事件冒泡和事件捕获详解
10-24
为了解决事件冒泡和事件捕获的问题，W3C制定了DOM事件标准，它既支持事件捕获也支持事件冒泡，并允许开发者指定其事件处理函数在哪个阶段被调用。这通过addEventListener方法实现，它有三个参数：element....
IE与Firefox事件处理差异：冒泡与捕获机制详解
这是因为它们分别基于不同的事件模型：Internet Explorer采用的是IE4+模型，而Firefox遵循W3C标准，特别是Safari浏览器的模型。这两种模型的主要差异体现在事件的触发顺序和事件流机制上。 首先，关于事件触发，IE...
IE与非IE浏览器在事件绑定的执行顺序问题
weixin_34038652的博客
09-20 120
原始的DOM1事件处理机制，是不能绑定多个处理函数。如一个元素在onclick事件先绑定一个函数，用来alert其id，然后再在相同的事件绑定另一个函数，用来alert其style。对不起，第二个函数会覆盖掉第一个，只会alert其style。于是.addEventListener() 与 .attachEvent()被分别开发出来了。为了屏蔽各浏览器的差异，javascript界举办了一个慈善邀...
W3C标准定义的事件
LIUHONGLIAN
09-27 453
W3C标准定义的阻止事件向父容器传递： e.stopPropagation()：阻止事件向父容易传递，但不能阻断事件的触发。 DOM中的事件对象： preventDefault() ：取消事件默认行为 stopImmediatePropagation() ：取消事件冒泡同时阻止当前节点上的事件处理程序被调用。 stopPropagation()：取消事件冒泡对当前节点无影响。 IE中的...
js经典试题之w3规范系列
weixin_33862188的博客
11-02 369
js经典试题之w3规范系列 1：w3c制定的javascript标准事件模型的正确的顺序？ 答案：事件捕获->事件处理->事件冒泡 解析：先事件捕获从windows > document 往下级直到 特定的事件节点，然后进行事件处理，再事件冒泡，从特定节点往上级，这个完整的过程 2：列举javascript Browser 对象？ 答案： Navagat...
第八章 JS事件
m0_46844278的博客
04-30 3527
JavaScript前端开发教程 目录： 第八章 JS事件 事件概述 事件的绑定方式 事件对象 【案例】缓动的小球 页面事件 焦点事件 鼠标事件 【案例】鼠标拖拽特效 键盘事件 表单事件 【案例】图片放大特效 &&：习题+答案 链接：第八章 JS事件 PPT???? 习题： 单选题： 1、W3C规定在以下哪个阶段进行事件处理（）。 A、事件冒泡 B、事件捕获 C、事件冒泡和事件捕获...
事件冒泡和捕获的执行顺序
热门推荐
蘑菇炸了
12-07 1万+
给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，会执行几次事件，会先执行冒泡还是捕获？
关于浏览器里事件的捕获和冒泡及监听器执行的顺序
大概关于
08-27 1416
本文并不是一篇实用的文字，不考虑兼容性，而在于机制的理解。 关于本文的题目，不叫“js事件的捕获和冒泡”，是因为码者并不清楚这种叫法准不准确，于是用一个不那么精确的“浏览器”一词。 测试环境：Firefox Quantum 61.0.2 (64 位) 发现问题（场景） 下面n段代码的输出？ （代码一）基本的嵌套 &amp;lt;div onclick=&quot;outer()&quot;...
IE浏览器的事件冒泡机制
实践求真知
11-22 1210
一 介绍 1、当浏览者在页面上执行了某个动作，页面上实际上有多个元素可以响应该事件，假如单机页面的某个按钮，该按钮又处于元素之内，则实际上用户既单机了该按钮，也单击了元素。 2、IE中的事件传递方向是从事件发生的对象开始，然后依次向该对象所在的父节点传递。这种传递方式是从下向上传递的，因此这种事件的传递机制又称为冒泡。 3、下面应用说明了这种机制的用法   二 冒泡机制代码
事件冒泡怎么解决，与ie的兼容又怎么解决
qq_37805832的博客
09-20 796
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值