`
李俊良
  • 浏览: 145172 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE和标准的事件绑定差异

 
阅读更多

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function good(){
	alert(1);if(console){console.log(this);}
}
if(document.addEventListener){
	document.addEventListener("click",good,false);
	document.addEventListener("click",good,false);
	document.addEventListener("click",good,false);
}else{
	document.attachEvent("onclick",good);
	document.attachEvent("onclick",good);
	document.attachEvent("onclick",good);
}
</script>
</body>
</html>

 

 

在不同的浏览器中可以发现，IE下会显示3次alert

但是其他标准浏览器中只会显示一次alert

说明的问题是

1.attachEvent可以给同一个元素重复绑定相同的函数

 

2.this指针问题，attachEvent的this指向window对象，而addEventListener就是对应的DOM元素，也就是Document对象

分享到：
| 中国象棋 nodejs 做服务器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    第34章 项目1-博客前端：封装库--事件绑定[下]1

    例如，`fixEvent`函数用于修复事件对象，使其具有`preventDefault`和`stopPropagation`方法，以兼容W3C标准，同时也解决了IE的事件处理方式。 总结来说，本章节主要讲述了如何封装一个跨浏览器的事件绑定库，该库...

    IE与Firefox的事件区别

    在不同的浏览器环境下，事件处理的实现机制有所差异，尤其是在Internet Explorer（IE）和Firefox之间。本文将深入探讨这些差异，以帮助开发者更好地理解和解决跨浏览器的兼容性问题。 首先，我们要了解事件流的概念...

    javascript 处理事件绑定的一些兼容写法

    移除事件绑定同样需要考虑到浏览器的差异。`removeEvent`函数处理了`removeEventListener`和`detachEvent`： ```javascript var removeEvent = function( obj, type, fn ) { if (obj.removeEventListener) obj....

    (word完整版)javascript看qq中多事件绑定的执行顺序.doc

    总之，JavaScript在不同浏览器环境下的事件绑定存在差异，特别是IE浏览器的`attachEvent`方法。开发者需要了解这些差异，并根据实际需求选择合适的解决方案，以确保事件处理函数在所有目标浏览器中都能按预期顺序...

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

    1. **事件绑定差异** 在JavaScript中，为`option`元素绑定事件通常使用`addEventListener`或`attachEvent`方法。`addEventListener`是W3C标准，适用于大多数现代浏览器，而`attachEvent`则是Internet Explorer (IE...

    js中DOM事件绑定分析.docx

    而在Internet Explorer中，对应的API是`attachEvent`和`detachEvent`，它们不支持事件捕获，且存在其他差异，比如`this`指向问题和重复绑定的问题。 **注意事项**： - **事件冒泡与捕获**：事件通常从最深的节点...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    在标准模式下，IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器，这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性，通常推荐使用`addEventListener`方法为元素添加事件监听器，但由于IE8...

    用于在IE浏览器下做js调试使用的好工具

    在JavaScript（简称js）开发过程中，调试是必不可少的环节，特别是在Internet Explorer（IE）这种曾经占据主导地位的浏览器上，由于其独特的内核和对标准支持的差异，开发者经常会遇到各种难以预料的问题。...

    BlueBala » 兼容IE和Firefox的事件模型(拖动)

    而Firefox和其他基于W3C标准的浏览器则使用`addEventListener`和`removeEventListener`方法来处理事件绑定。 拖动功能在网页中通常涉及鼠标按下、移动和释放等事件。在IE中，我们可以通过`onmousedown`、`...

    IE6用setAttribute添加事件无效

    在现代浏览器中，`setAttribute`方法可以方便地为HTML元素添加属性和事件处理程序，但在IE6中，这个方法并不总是如预期般工作，特别是对于事件绑定。 在Web开发中，我们经常需要动态地为DOM元素添加事件监听器，...

    IE和Firefox的鼠标滚轮事件JavaScript代码

    ### IE和Firefox的鼠标滚轮事件JavaScript代码 #### 背景与概述 在Web开发过程中，处理不同浏览器...通过上述分析和示例代码，我们可以有效地处理IE和Firefox之间的鼠标滚轮事件差异，实现跨浏览器兼容性的解决方案。

    javascript大事绑定学习要点_.docx

    对于IE浏览器，它使用不同的事件绑定方式：`attachEvent`和`detachEvent`。这两个方法的用法与`addEventListener`和`removeEventListener`类似，但有一些差异，比如事件处理函数的`this`指向不同，以及没有第三个...

    Javascript在IE和FireFox中的不同表现

    - `window.attachEvent`是IE特有的事件绑定方式，而Firefox使用`addEventListener`。 2. **DOM操作差异**： - IE中的`innerHTML`属性可以用来设置或获取HTML元素的全部内容，但在早期版本中，IE处理某些元素（如`...

    ajax中的IE和火狐的区别

    本文将基于提供的文档摘要，深入探讨Internet Explorer（IE）与Mozilla Firefox（火狐）这两种主流浏览器在处理DOM操作、事件绑定等方面存在的差异，并提出相应的解决方案。 #### 一、InnerText与InnerHTML - **...

    浅谈JavaScript事件绑定的常用方法及其优缺点分析

    本文将探讨三种常见的JavaScript事件绑定方法：传统方式、W3C标准方式以及Internet Explorer (IE)方式，并分析它们各自的优缺点。 1. **传统方式（DOM0级事件处理程序）** - **优点**： - 简单易用，适用于所有...

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

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

    IE和Mozilla中脚本兼容性汇总

    IE（Internet Explorer）和Mozilla（包括Firefox）对JavaScript事件处理和事件对象的处理方式存在差异，这给开发者带来了额外的工作量。以下是一些关于IE和Mozilla中脚本兼容性的关键点： 1. **事件对象的访问**： ...

    JavaScript实现为事件句柄绑定监听函数的方法分析

    总之，JavaScript的事件绑定涉及到多种方法，包括传统方法、W3C标准方法和IE特有的方法。理解这些方法及其差异是编写兼容性良好的JavaScript代码的关键。同时，跨浏览器的解决方案如`addEvent`和`removeEvent`函数...

    js绑定事件和解绑事件

    而`addEventListener`方法则是一个更为现代和标准的方法，它不仅兼容现代浏览器如火狐（Firefox）和谷歌（Chrome），还支持IE9及更高版本。其语法格式为`element.addEventListener(eventName, function, useCapture)...

    JS在IE和FF中的兼容性问题

    - 事件绑定：IE使用 `attachEvent`，FF使用 `addEventListener`。可以使用如下代码进行兼容： ```javascript element.addEventListener ? element.addEventListener('event', function, false) : element....

Magicbox
Global site tag (gtag.js) - Google Analytics