`

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/   

 

 

 

 

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

相关推荐

    事件模型在各浏览器中存在差异

    事件对象在不同浏览器中的实现也存在差异。在DOM 2 Events中,Event接口提供了事件的相关信息,如事件类型、目标、时间和是否阻止冒泡等。但各个浏览器对某些特定事件属性或方法的支持可能存在差异。例如,`event....

    javascript事件模型

    然而,不同的浏览器在实现上存在差异,比如IE有一个专有的事件模型,与DOM标准不同。 在JavaScript中,事件接口包括HTMLEvents、MouseEvents和UIEvents。HTMLEvents是所有事件接口的父接口,包含了如abort、change...

    javascript 跨浏览器的事件系统

    这些封装函数负责处理不同浏览器间的事件模型差异,确保事件监听器可以在不同的浏览器中正确地添加和移除。 DOM事件模型的关键特性包括事件冒泡(事件从被点击的元素向上层元素传播)和事件捕获(事件从顶层元素向...

    js中DOM事件绑定分析.docx

    - **this的指向**:在DOM事件中,`this`通常指向触发事件的元素,但在IE的`attachEvent`中,`this`指向`window`对象。 **最佳实践**: - 使用`addEventListener`和`removeEventListener`以保持兼容性和更好的控制。...

    JavaScrip文档对象模型(DOM).

    由于不同版本的DOM在各个浏览器中的支持程度不同,这给Web开发者带来了不小的挑战。为了确保网站能在多种浏览器中正常运行,开发者需要注意以下几点: 1. **使用标准化的DOM API**:尽可能使用W3C推荐的标准API,...

    对各个浏览器做了一个测试,发现了一有趣的现象

    这可能涉及到DOM操作、事件处理、CSS3动画、响应式设计等方面,这些都可能在不同浏览器中表现出不同的性能和效果。 “工具”标签可能是指博主使用了一些测试工具,如BrowserStack、Sauce Labs或者自定义的自动化...

    DOM文档对象模型

    7. **DOM与浏览器兼容性**:虽然DOM是一个标准,但在不同浏览器中实现可能存在差异。因此,开发者需要关注跨浏览器的兼容性问题,通常会使用库如jQuery来简化这方面的处理。 8. **DOM的性能考虑**:频繁操作DOM会...

    JS事件冒泡浏览器兼容

    通过使用DOM2级事件接口和编写兼容性代码,可以有效地管理这些差异,确保在各种浏览器环境下都能正确处理事件。在实际开发中,理解并掌握事件冒泡以及如何处理浏览器兼容性是每个前端开发者必备的技能。

    js跨浏览器是正对目前各浏览器标准不同

    1. **浏览器差异概述**: 不同的浏览器如Chrome、Firefox、Safari、Edge和Internet Explorer(IE)等,在解析JavaScript语法、DOM操作、事件处理、CSS样式等方面可能有各自的理解和实现。例如,一些浏览器可能支持...

    javascript的三种事件模型.docx

    在W3C DOM模型中,`false`表示事件冒泡(event bubbling),`true`表示事件捕获(event capturing)。此外,`removeEventListener`可以用来解除事件绑定,以释放资源或改变事件处理行为。 这三种事件模型在实际开发...

    Dom与浏览器兼容性说明

    这个标题强调了DOM(文档对象模型)在不同浏览器中实现与兼容性的重要性。在互联网早期,浏览器大战导致了各种专有的、非标准化的特性。这使得开发者在创建跨浏览器的网页时面临了巨大挑战。DOM作为浏览器中用于访问...

    javascript大事模型介绍_.docx

    本文将详细介绍三种主要的事件模型:原始事件模型、DOM2事件模型以及IE事件模型,并探讨它们的差异和使用方法。 首先,原始事件模型是所有浏览器都支持的基础模型。在此模型中,事件分为“输入事件”(如`onclick`...

    JavaScript_DOM编程艺术第二版(中文)

    在DOM部分,书中详细讲解了DOM模型的层次结构,如何通过JavaScript访问和修改HTML元素,以及如何利用DOM事件来响应用户交互。理解DOM节点、属性、事件和选择器是创建动态网页的关键,这使得开发者能够动态加载内容、...

    非常小的库,使使用DOM事件发射器API(和其他API)更容易一些。.zip

    标题中的“非常小的库,使使用DOM事件发射器API(和其他API)更容易一些”指的是一个轻量级的JavaScript库,它的主要目的是简化对DOM(文档对象模型)事件发射器API以及其他相关API的使用。在Web开发中,DOM事件是...

    javascript 兼容各个浏览器的事件

    要编写兼容各个浏览器的JavaScript事件处理代码,我们需要了解不同浏览器之间在事件处理方面的差异以及如何编写能够兼容这些差异的代码。以下将详细介绍跨浏览器事件处理的相关知识点。 首先,什么是事件对象?在...

    京探网jquery五屏焦点图,大图尺寸416x243,兼容各个浏览器

    总的来说,"京探网jquery五屏焦点图,大图尺寸416x243,兼容各个浏览器"这个项目展示了前端开发中的多种技术应用,包括jQuery库的高效操作、ECMAScript的语法特性、JavaScript的事件驱动以及跨浏览器的兼容性策略。...

    IE与Firefox的事件区别

    事件流描述了事件如何在DOM(文档对象模型)层次结构中传播。主要有两种类型:冒泡型事件流和捕获型事件流。冒泡型事件从最具体的元素(如按钮)开始,逐级向上至最不具体的元素(如document)传递。而捕获型事件则...

    浏览器内部工作原理

    这些差异可能导致页面在不同浏览器上的表现不一致,因此Web开发者需要考虑浏览器兼容性问题。 浏览器的线程结构也值得关注,例如Chrome的多进程架构,每个Tab拥有独立的渲染引擎进程,提高了资源管理和安全性。 ...

Global site tag (gtag.js) - Google Analytics