DOM 事件模型在各个浏览器中差异
来源:互联网 发布:淘宝下拉框词一键提取 编辑:程序博客网 时间:2024/06/04 18:58
网上搜“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/
- DOM 事件模型在各个浏览器中差异
- javascript事件在IE和DOM浏览器的差异总结
- sessionid在各个浏览器内的差异
- 操控DOM 在各个浏览器的兼容
- 浏览器间DOM差异
- [js]如何在js方法中传递事件对象并且在各个浏览器之间兼容
- 12_XML DOM 浏览器差异
- 浏览器各个事件控制
- 在js中各个浏览器版本判断
- javascript计算器之DOM事件模型-----浏览器兼容问题
- avascript计算器之DOM事件模型-----浏览器兼容问题
- DOM 2级事件模型跨浏览器处理
- 浏览器对象模型DOM
- jquery之浏览器的事件模型(DOM 0级事件模型)
- jquery之浏览器的事件模型(DOM 2级事件模型)
- java下载文件在各个浏览器差异 以及中文乱码解决
- javascript数组之in操作符在各个浏览器解析的差异
- javascript 中各个浏览器dom,xml dom的区别和json的注意事项
- 《java NIO》缓存区之内核空间、用户空间和虚拟地址
- MVC 学习笔记一
- 隐藏JSF应用中的HTTP Header信息
- VS中OutOfMemoryException 异常问题
- 设计模式实现(二): Abstract Factory Pattern
- DOM 事件模型在各个浏览器中差异
- C# SQLite 记录一
- Android Animation学习笔记(转)
- 【转】iReport与JasperReport简介
- Introduction to A Prototype-based Language - JavaScript
- 失败的fileupload上传文件类型控制
- 轉 帶有界面的服務程序
- C#连接4种类型数据库(Access、SQL Server、Oracle、MySQL)
- Oracle创建删除用户、角色、表空间、导入导出数据库命令行方式总结