[已转移]IE事件流和DOM标准事件流的区别
该文章已转移到博客:https://cynthia0329.github.io/
1.执行的顺序不一样
冒泡型事件模型: button->div->body (IE事件流)
捕获型事件模型: body->div->button (Netscape事件流)
DOM事件模型: body->div->button->button->div->body (先捕获后冒泡)
2.事件侦听函数的区别
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
DOM使用:
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定
3、参数不一样和this指向不一样
IE下注册多个事件监听器与移除监听器方法
注册多个事件监听器
element.attachEvent('onclick', observer);
attachEvent接受两个参数。
第一个参数是事件名称
第二个参数observer是回调处理函数。
这里得说明一下,有个经常会出错的地方,IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素,这时的this为window对象了,笔者很奇怪IE为什么要这么做,完全看不出好处所在。
移除先前注册的事件的监听器
element.detachEvent('onclick', observer);
DOM标准下注册多个事件监听器与移除监听器方法
注册多个事件监听器
实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同,它通过元素的addEventListener方法注册,该方法既支持注册冒泡型事件处理,又支持捕获型事件处理。
element.addEventListener('click', observer, useCapture);
addEventListener方法接受三个参数。
第一个参数是事件名称,值得注意的是,这里事件名称与IE的不同,事件名称是没’on’开头的;
第二个参数observer是回调处理函数;
第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用
它可以在一个DOM元素上绑定多个事件处理器,并且在处理函数内部,this关键字仍然指向被绑定的DOM元素,另外处理函数参数列表的第一个位置传递事件event对象。
移除先前注册的事件的监听器
element.removeEventListener('click', observer, useCapture);
参考:
https://www.cnblogs.com/nikiguo/p/8522317.html
[已转移]IE事件流和DOM标准事件流的区别的更多相关文章
- jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件
很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...
- js事件(一)之事件流
1.事件流定义 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事 ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- 5事件DOM零级事件跟DOM二级事件
事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...
- [已转移]JavaScript事件---DOM事件流
该文章已转移到博客:https://cynthia0329.github.io/ 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件 这个传播过程即DOM事件流. ...
- [已转移]js事件流之事件冒泡的应用----事件委托
该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- 前端基本知识(一):W3C标准&&冒泡事件,捕获事件,W3C DOM对象模型,对比分析
W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...
- w3c标准 dom对象 事件冒泡和事件捕获
http://www.cnblogs.com/chengxs/p/6388779.html http://www.jb51.net/article/42492.htm W3C标准是什么? 1.表现(c ...
随机推荐
- javascript date utc
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangbin10025/article/details/37503465 近期在使用highsto ...
- js+php如何实现上传图片
近期有一些朋友,在做上传图片这一块的时候进度卡住了.有个朋友说,我已经在这个问题上浪费了一天了. 确实,对于新手而言,上传图片成了比较复杂的的一个事,今天整理了一下常用的两种方式,让新手轻松掌握上传图 ...
- maven-home
E:/Soft/Maven/apache-maven-3.3.3 E:\Soft\Maven\apache-maven-3.3.3\conf\settings.xml E:\DellWork\Mave ...
- 彩色图像与二值图像(mask)点乘
问题描述:给出一幅彩色图像和一张mask二值图像,其中mask和彩色图像大小相同,感兴趣的部分为1,其余部分为0,请用mask与彩色图像点乘,将感兴趣区域显示出来. 点乘的本质是mask中是二值图像, ...
- LUOGU P3111 [USACO14DEC]牛慢跑Cow Jog_Sliver
传送门 解题思路 比较简单的一道思路题,首先假设他们没有前面牛的限制,算出每只牛最远能跑多远.然后按照初位置从大到小扫一遍,如果末位置大于等于前面的牛,那么就说明这两头牛连一块了. 代码 #inclu ...
- LINQ(语言集成查询)
LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作 ...
- 学习Web前端开发时有哪些技术点
现在学前端的人是越来越多,学习质量也是参差不齐.过来人的身份告诉你,如果你还没有下定决心花时间去学习Web前端,那也可以先找些视频学习下,Web前端开发有哪些常见技术点!接下来,就看看Web前端开发有 ...
- webstorm之Monokai-Sublime主题颜色设置方法及激活注册码
打开https://github.com/OtaK/jetbrains-monokai-sublime 链接,然后点击右边的下载ZIP文件即可.解压之后,会得到一个Monokai-Sublime.ja ...
- nginx在win系统下的安装配置与tomcat集成springmvc框架
先来一个常用命令 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止 ...
- IO流5 --- FileReader读入数据的基本操作 --- 技术搬运工(尚硅谷)
FileReader 字符输入流 @Test public void test1(){ File file = new File("hello.txt"); FileReader ...