element.addEventListener(type, listener, useCapture);
详解：
1）element 是要绑定函数的对象：document、window 或 XMLHttpRequest。
2）type 字符串，事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"，比如“click”、“mouseover”、“keydown”等。
3）listener 实现了 EventListener 接口或者是 JavaScript 中的函数，即绑定的函数了，记住不要跟括号。
4）useCapture 布尔值，表示该事件的响应顺序，是否使用捕捉，看了后面的事件流一节后就明白了，一般用 false
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>
js代码
window.onload=function()
{
document.getElementById("div_test").addEventListener("click",test1,false);
document.getElementById("btn_test").addEventListener("click",test2,false);
}
function test1(){ alert("外层div触发") }
function test2(){ alert("内层input触发") }
如果userCapture是true则test1先触发，如果userCapture是false则test2先触发。
事件触发时，会将一个 Event 对象传递给事件处理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同，同时在使用的过程中要注意
attachEvent方法 按钮onclick IE中使用
addEventListener方法 按钮click fox中使用
两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法 用于 Mozilla系列
举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行
写成这样：
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1
如果是Mozilla系列，并不支持该方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3
实例：(要注意的是div必须放到js前面才行)
<html>
<head>
</head>
<body>
<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;">
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div>
</div>
<div id="info"></div>
<script>
var name1=document.getElementById('name1'); //要注意
var name2=document.getElementById('name2'); //要注意
var info=document.getElementById('info');
if(name1.attachEvent){ //对于attachEvent前面的target我们一定要保证不为空
name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; });
name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; });
}else{
name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false);
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false);
}
</script>
</body>
分享到：
相关推荐
在JavaScript中，`...以上就是关于 `attachEvent` 和 `addEventListener` 的使用方法及其区别的详细介绍，它们在JavaScript事件处理中起着至关重要的作用。正确理解和使用这些方法可以提高代码的健壮性和兼容性。
本知识点将介绍 JavaScript 中两种常用的方法：attachEvent 和 addEventListener，以及它们在不同浏览器中的应用和区别。 首先，attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法，它的语法是：...
### JavaScript中的事件处理：attachEvent与addEventListener #### 一、引言 JavaScript 是一种广泛使用的脚本语言，它被用于实现网页的动态效果和交互功能。随着 Web 技术的发展，浏览器之间的差异也逐渐显现出来...
2. **`attachEvent`**: 与`addEventListener`不同，`attachEvent`在IE中执行事件处理函数时，`this`会指向绑定事件的元素，通常是全局对象`window`。当点击`test1`时，所有浏览器的行为一致，因为`onclick`属性直接...
在JavaScript中，处理DOM事件监听有两个主要的方法：`addEventListener` 和 `attachEvent`。这两个方法在功能上相似，但存在一些关键的区别，特别是在浏览器兼容性和事件处理方式上。 `addEventListener` 是W3C标准...
首先，我们需要理解`attachEvent`与`addEventListener`的区别。`attachEvent`是IE4至IE8特有的事件绑定方式，而`addEventListener`则是一种更通用、更符合W3C标准的方法，被现代浏览器广泛支持。当我们在IE11中尝试...
Mozilla中： addEventListener的使用方式： target.addEventListener(type, listener, useCapture); target： 文档节点、document、window 或 XMLHttpRequest。 type： 字符串，事件名称，不含“on”，比如“click”...
这时就要用window.attachEvent和window.addEventListener来解决一下。 下面是一个解决方法。至于attachEvent和addEventListener的用法，可以自己Google或百度一下。 代码如下: if (document.all){ window....
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEventListener方法 兼容火狐谷歌,不兼容IE8及以下 ...
在不同的浏览器环境中，`addEventListener` 的使用略有差异，尤其是在IE与非IE浏览器之间。 在标准的W3C DOM2级事件模型中，`addEventListener` 的语法如下： ```javascript target.addEventListener(type, ...
总之，解决`self.attachevent is not a function`错误的关键在于理解`attachEvent`和`addEventListener`的区别，并通过条件判断或者使用库来实现跨浏览器的兼容性。同时，对于事件处理的模式选择，应根据实际需求和...
需要注意的是，`addEventListener`在Internet Explorer 9以下版本不被支持，此时需要使用`attachEvent()`，其语法与`addEventListener`有所不同，事件类型需要加上`on`前缀，且不接受`useCapture`参数。 此外，...
接下来，我们讨论IE的`attachEvent`与Firefox的`addEventListener`的区别。在IE浏览器中，`attachEvent`用于添加事件监听器，而`addEventListener`是W3C标准的事件处理方式，被Firefox等现代浏览器所支持。两者的...
与W3C标准的`addEventListener`不同，`attachEvent`并不支持事件捕获阶段，并且它的事件处理函数会在事件冒泡的过程中执行。 在`attachEvent`中，事件处理函数的执行上下文（即`this`的值）会指向调用`attachEvent`...