`

javascript事件在IE和DOM浏览器的差异总结

阅读更多

1、事件处理函数

在IE中:

每个元素和windows对象都有两个方法:attachEvent()和detachEvent(),看名字就知道第一个是添加事件处理函数,第二个是移除。
1    [object].attachEvent("name_of_event_handler","function_to_attach")
2    [object].detachEvent("name_of_event_handler","function_to_remove")

这种方法可以添加多个事件处理函数

在DOM浏览器中:
addEventListener()和removeEventListener()来分配和移除事件处理函数。他有三个参数:事件名称、要分配的函数、处理函数是用于冒泡阶段还是捕获阶段(捕获阶段为true)。
1    [object].addEventListener("name_of_event",fnhander,bcapture)
2    [object].removeEventListener("name_of_event",fnhander,bcapture)

同样也可以添加多个事件处理函数

2、事件对象的定位

在IE中:
事件对象是windows对象的一个属性event,事件处理函数必须这样访问事件对象:
1    oDiv.onclick = function(){
2        var var oEvent = window.event;
3    
4    }

在DOM中:
而在DOM标准中event对象必须作为唯一的参数传递给事件处理函数,所以要这么做:
1    oDiv.onclick = function(){
2        var oEvent = argunments[0]
3    }

或者
1    oDiv.onclick = function(oEvent){
2    
3    }

所以要用不同的方法来获取event对象
所以我们经常见到这种写法
1    e =  event || window.event

逻辑或操作符作用于两个对象时第一个对象非空,返回第一个对象,否则返回第二个对象。

还有在arguments属性,在event对象中总是事件处理函数的第一个参数,也就是说可以访问事件处理函数的agreements[0]来获取event对象
3、获取目标

在IE中:
IE目标包含在event对象的srcElement属性中:
1    var oTarget = oEvent.srcElement;

在DOM中:
目标包含在target属性中:
1    var oTarget = oEvent.target;

IE目标只能是元素、文档或者窗口;DOM兼容的浏览器也允许把文本节点作为目标
4、获取字符代码

IE和DOM都支持event对象的keyCode属性,他会返回按下按键的数值代码

在IE中:
1    var oCharCode = oEvent .keyCode;

在DOM中:
1    var oCharCode = oEvent .charCode;
5、阻止默认行为

在IE中:
1    oEvent.returnValue = false;

在DOM中:
1    oEvent.preventDefault();
6、停止冒泡

在IE中:
1    oEvent.cancelBubble = true;

在DOM中:
1    oEvent.stopPropagation();
7、获取事件源

在IE中:
1    oEvent.target

在DOM中:
1    oEvent.srcElement  

 

 

为了兼容各浏览器我在自己的库里面已经封装了这些函数,使用很方便的。KW.js

分享到:
评论

相关推荐

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

    例如,`event.preventDefault()`在某些早期浏览器中可能不完全符合标准,或者某些自定义事件的属性和方法可能只有部分浏览器支持。 因此,了解和掌握不同浏览器对事件模型的实现,以及如何适配这些差异,对于编写...

    javascript 按键事件(兼容各浏览器)

    在本文中,我们首先介绍了JavaScript中处理...兼容不同浏览器的JavaScript代码编写是一个需要细致考虑兼容性的过程,开发者需要对不同浏览器的事件处理和DOM属性有所了解,以确保功能的正常实现和用户体验的一致性。

    IE与Firefox的事件区别

    值得注意的是,在DOM浏览器中,文本节点也会触发事件,这在IE中是不会发生的。 为事件指定处理函数,有两种常见的方法:一是通过JavaScript动态绑定,二是直接在HTML标签内使用`onclick`属性。例如: ```...

    javascript 跨浏览器的事件系统

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

    DOM文档和Javascript的IE和Firefox兼容性

    Internet Explorer(IE)和Mozilla Firefox是两个历史悠久且具有广泛用户基础的浏览器,它们对JavaScript的支持存在差异,尤其是在老版本中。开发者在编写JavaScript代码时,必须考虑到这些差异,以确保代码能在不同...

    JavaScript获取HTML DOM节点元素的方法的总结

    值得注意的是,不同的浏览器在实现DOM接口时可能存在差异,因此在进行跨浏览器开发时,应考虑使用像jQuery、Prototype这样的库来确保代码的兼容性和一致性。此外,随着ECMAScript新版本的发布,如ES6中引入了`...

    option属性的js事件浏览器差异

    `option`属性和与之相关的JS事件在不同浏览器之间可能存在差异,这些差异主要体现在事件处理、行为表现和兼容性上。了解并处理这些差异对于确保网页在各种浏览器上的正常运行至关重要。 1. **事件绑定差异** 在...

    IE多版本浏览器

    - 使用【IE多版本浏览器】工具,开发者可以在同一台计算机上方便地切换不同版本的IE,快速检测和调试页面在各版本下的表现,确保网站在老用户和使用旧版浏览器的用户群体中正常运行。 3. **开发和调试工具**: - ...

    javascript事件详解

    在处理跨浏览器事件时,需要注意IE和其他浏览器之间的差异,以确保代码兼容性。 总的来说,JavaScript事件是构建动态网页的关键工具,理解并掌握事件处理机制、事件阶段和事件对象的使用,能够帮助开发者编写更高效...

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    在讨论如何使用JavaScript来创建一个跨浏览器的事件处理机制时,我们首先需要了解不同浏览器之间在事件处理方面的差异性,以及为了兼容这些差异,开发者们采取了哪些策略。以下是从给出的文件内容中提取出来的相关...

    Javascript文档对象模型(DOM

    W3C DOM作为最新且最广泛支持的标准,其目标在于提供跨浏览器的兼容性和一致性,尽管如此,开发者仍需注意不同浏览器间可能存在的细微差异。 #### 六、DOM操作示例 考虑以下HTML代码片段: ```html <!DOCTYPE html>...

    IETes 测试ie低版本浏览器

    5. **DOM和BOM差异**:不同IE版本的文档对象模型(DOM)和浏览器对象模型(BOM)可能有所不同,需要通过IETester检查其一致性。 6. **调试工具**:IETester通常会提供一些基本的调试工具,如查看元素、控制台日志等...

    多浏览器之间的差异,赶快下载啊

    在IT行业中,尤其是在Web...使用jQuery等工具可以简化这一过程,但仍然需要开发者具备识别和解决浏览器差异的能力。同时,保持代码的灵活性和模块化,以及定期更新技术知识,对于应对不断变化的浏览器环境至关重要。

    javascript在firefox与ie下的兼容性总结

    JavaScript在Firefox和IE之间的兼容性问题一直是前端开发者面临的一大挑战。由于这两个浏览器内核的不同,导致在处理某些JavaScript特性时存在差异。以下是一些常见的兼容性问题及其解决方案: 1. **Document.form....

    javascript事件模型

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

    Javascript Event事件中IE与标准DOM的比较

    JavaScript中的事件处理在不同的浏览器环境下,尤其是Internet Explorer (IE) 和遵循Document Object Model (DOM) 规范的浏览器之间存在显著差异。以下是这些差异的详细解释: 1. **事件流的区别**: - **IE冒泡型...

    js在IE与firefox的差异集锦

    特别是在使用JavaScript编程语言时,IE和Firefox两个浏览器在很多方面的实现都存在差异。本文将详细介绍这些差异并提供相应的解决方法。 1. 关于innerText属性的支持: Firefox浏览器不支持innerText属性,而支持...

    javascript在IE和Firefox中兼容性问题

    例如,`onchange`和`onblur`事件在IE和Firefox中的触发时间可能不同,开发者需要考虑到这些差异,以确保事件处理的一致性。 7. **body测试.html** `body`元素在不同浏览器中的加载时机和处理方式也可能有区别。在...

    前端标准在各浏览器中的差异

    - 不同版本的IE浏览器(如IE6、IE7、IE8等)在处理`hasLayout`特性上可能存在显著差异,这对于跨浏览器开发来说是一大挑战。 - 其他浏览器(如Firefox、Chrome、Safari等)遵循W3C的标准规范,但在实现细节上也会...

Global site tag (gtag.js) - Google Analytics