[已转移]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 ...
随机推荐
- mybatis学习:mybatis的环境搭建与入门
一.mybatis的概述: mybatis是一个持久层框架,用java编写 它封装了jdbc操作的很多细节,使开发者只需要关注sql语句本身,而无需关注注册驱动,创建连接登繁杂过程 它使用了ORM思想 ...
- MySQL事务、锁机制、查询缓存
MySQL事务 何为事务? 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit). 一个事务可以是一条SQL语句,一组SQL语句或整个程序. 事务的特性: 事 ...
- mysql导出数据库某些表的数据
# 导出数据,一般从从库导出,减少主库的压力.mysqldump -hhostname -P3306 --single-transaction --master-data= database_name ...
- 基于MaxCompute的媒体大数据开放平台建设
摘要:随着自媒体的发展,传统媒体面临着巨大的压力和挑战,新华智云运用大数据和人工智能技术,致力于为媒体行业赋能.通过媒体大数据开放平台,将媒体行业全网数据汇总起来,借助平台数据处理能力和算法能力,将有 ...
- [Array]167. Two Sum II - Input array is sorted
Given an array of integers that is already sorted in ascending order, find two numbers such that the ...
- 【python之路38】Python正则表达式匹配反斜杠“\”
一.引入 在学习了Python特殊字符和原始字符串之后,我觉得答案应该是这样的: 1)普通字符串:'\\'2)原始字符串:r'\'但事实上在提取诸如“3\8”反斜杠之前的数字时,我屡次碰壁,始终得不到 ...
- 工控安全入门(二)—— S7comm协议
在上一次的文章中我们介绍了施耐德公司的协议modbus,这次我们把目标转向私有协议,来看看另一家巨头西门子的S7comm.首先要说明,这篇文章中的内容有笔者自己的探索,有大佬们的成果,但由于S7com ...
- laravel 下载报错:Unable to guess the mime type as no guessers are available
在使用laravel的download()函数实现下载功能时,报错如下:Unable to guess the mime type as no guessers are available (Did ...
- jeecms 基本架构研究
最近工作需要内容管理系统,下载了jeecms v5 顺便学习一下它的架构: 采用框架为:Hibernate3.3.2+spring3.05+springMVC+freemarker2.3.16 Hib ...
- jframe 设置左上角和任务栏的图标
默认就是 改成有意义的,一眼就能看出来功能的,比如一个小蜘蛛 第一个最简单的做法,把图片扔到工程的根目录,但是这样会相当乱,不便于文件管理 ImageIcon icon = new ImageIcon ...