MyException - 我的异常网
当前位置:我的异常网» Web前端 » DOM 事件模型在各个浏览器中区别

DOM 事件模型在各个浏览器中区别

www.MyException.Cn  网友分享于:2013-11-23  浏览:10次
DOM 事件模型在各个浏览器中差异

     网上搜“DOM事件模型”,文章非常多,在此写下仅仅是看到的那些文章的汇总,有错误欢迎指正。

 

     关于DOM事件模型图就不发鸟,网上很多,而且比较简单,这里说明一些关于DOM事件模型在各个浏览器中一些差异之处。

 

   DOM的事件分为两种:一个是捕捉性事件,一个是冒泡型事件,

 

  1,addEventListner (el,"click",true);第三个参数如果是true的话, 就是声明为捕捉事件处理。则在事件下发的时候,会发生祖先元素对事件进行处理。在firefox2和safari9里面是如此,而在opera里面并不会如此。

     这是因为firefox2和safari9并不是遵循DOM规范的,

     规范中这么说明:

        A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon which it is registered.

     大意是说:DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行,因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。

 

    在整个事件传播中,被执行的顺序是:
   1. 父元素中所有的捕捉型事件自上而下地执行 捕捉性事件。
   2. 目标元素的冒泡型事件  而firefox里面会进行捕捉型事件处理,而opera里面不会
   3. 父元素中所有的冒泡型事件自下而上地执行  。    

 

2,IE里面的事件模型:

   IE下没有addEventListener,但是也有自己的attachEvent,即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数(事件类型)需要加”on”,而addEventListener不用,另外attachEvent因为不支持事件捕捉,所以也没有第三个参数。

然而,attachEvent还有一个很要命的问题:重复绑定事件。
IE上可以对该元素的事件进行多次同样的绑定。这也算是比较不好的地方。而其他浏览器则会在重复绑定的时候,检测而后只绑定一次。同理在detachEvent的时候。(有待验证)

  •  IE事件模型只起泡,不捕捉。起泡中断方法:window.event.cancelBubble=true;
  •  Event对象不是事件处理程序的函数参数,而是window的全局变量。window.event;
  • 事件注册函数:attachEvent()和反注册:detachEvent().  重复绑定的情况下,也需要多次detachEvent

 
 在IE中使用event.cancelBubble = true; 来取消事件冒泡, 在Firefox中用stopPropagation()方法来停止事件冒泡, 即不要让别的元素看到该事件。 IE中关于event的获取是从window.event的方式获取,其目标通过event.srcElement 而firefox则使用event.target  。

 

3,Firefox中的onchang事件与IE中onchange事件、onpropertychange事件:

  • 对于checkbox、 input type="file"等元素,在Firefox中只要元素的内容一发生变化就触发onchang事件,而在IE中需等到元素失去焦点才触发 onchang事件;对于input type="text",FF和IE下一样,都是失去焦点之后才触发onchang事件。
  • IE中当元素的属性值或内容一发生变化(含JavaScript操作)就激发onpropertychange事件,Firefox无此事件。

关于事件类型 各个浏览器的支持程度:下面网址大部分都涵盖了:

 

     http://www.quirksmode.org/dom/events/   

 

 

 

 

1 楼 libmw 2010-11-25  
感谢分享……看到事件就蛋疼
2 楼 ember_319 2012-03-17  
这个IE的onChange真是麻烦,我试了好几个浏览器,就它跟大家不一样
3 楼 ember_319 2012-03-17  
在onclick里实现本来应该在onchange中做的事儿,这样IE工作的不错。不过需要增加自己的判断

文章评论

鲜为人知的编程真相
鲜为人知的编程真相
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
中美印日四国程序员比较
中美印日四国程序员比较
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Java程序员必看电影
Java程序员必看电影
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
为什么程序员都是夜猫子
为什么程序员都是夜猫子
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
漫画:程序员的工作
漫画:程序员的工作
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员的鄙视链
程序员的鄙视链
每天工作4小时的程序员
每天工作4小时的程序员
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
总结2014中国互联网十大段子
总结2014中国互联网十大段子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
编程语言是女人
编程语言是女人
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
那些争议最大的编程观点
那些争议最大的编程观点
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
旅行,写作,编程
旅行,写作,编程
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
10个调试和排错的小建议
10个调试和排错的小建议
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
一个程序员的时间管理
一个程序员的时间管理
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
如何成为一名黑客
如何成为一名黑客
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
老程序员的下场
老程序员的下场
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序员必看的十大电影
程序员必看的十大电影
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
我是如何打败拖延症的
我是如何打败拖延症的
程序员和编码员之间的区别
程序员和编码员之间的区别
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有