HTML addEventListener() 方法和attachEvent()区别分析

语法

element.addEventListener(event,function,useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

实例

您可以通过函数名来引用外部函数。

该实例演示了在用户点击a <button> 元素时如何执行函数:

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}</span></span>

您可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件。

该实例演示了如何在<button>元素中添加两个点击事件：

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);</span></span>

您可以在同一个元素中添加不同类型的事件。

该实例演示了如何在同一个 <button> 元素中添加多个事件：

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);</span></span>

修改 <button> 元素的背景：

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myBtn").addEventListener("click", function(){
    this.style.backgroundColor = "red";
});</span></span>

使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

// 添加 <div> 事件句柄

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myDIV").addEventListener("mousemove", myFunction);</span></span>

// 移除 <div> 事件句柄

<span style="font-family:SimSun;"><span style="font-size:18px;">document.getElementById("myDIV").removeEventListener("mousemove", myFunction);</span></span>

如果浏览器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

以下实例演示了跨浏览器的解决方法：

<span style="font-family:SimSun;"><span style="font-size:18px;">var x = document.getElementById("myBtn");
if (x.addEventListener) {                    //所有主流浏览器，除了 IE 8 及更早 IE版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本
    x.attachEvent("onclick", myFunction);
}</span></span>

 addEventListener() 方和attachEvent()区别

addEventListener(event,function,capture/bubble);

参数event如上表所示, 

function是要执行的函数, 

capture与bubble分别是W3C制定得两种时间模式,

简单来说capture就是从document的开始读到最后一行, 再执行事件, 

而bubble则是先寻找指定的位置再执行事件.

capture/bubble的参数是布尔值, True表示用capture, False则是bubble.

Windows Internet Explorer( IE )也有制定一种EventHandler, 是 attachEvent(), 格式如下:

window.attachEvent(”submit”,myFunction());

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.

Mozilla中：

addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 

移除设定的事件, 格式分别如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);


 
事件触发时，会将一个 Event 对象传递给事件处理程序，比如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
适应的浏览器版本不同，同时在使用的过程中要注意
（1）attachEvent方法 按钮onclick IE中使用
（2）addEventListener方法 按钮click fox中使用 

两者使用的原理：可对执行的优先级不一样，下面实例讲解如下： 

（1）attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
（2）addEventListener方法 用于 Mozilla系列
举例:

<span style="font-family:SimSun;">document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;</span>

如果这样写,那么将会只有medhot3被执行
写成这样：

<span style="font-family:SimSun;">var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3);</span>

执行顺序为method3->method2->method1
如果是Mozilla系列，并不支持attachEvent该方法，需要用到

<span style="font-family:SimSun;">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);</span>

执行顺序为method1->method2->method3

实例：(要注意的是div必须放到js前面才行) 

<span style="font-family:SimSun;"><html> 
<head> 
</head> 
<body> 
<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> 
</div> 
<div id="info"></div> 
<script type="text/javascript"><!-- 
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> 
</html> </span>

DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:

DOM1 协定:

Event Name	Description
onblur()	The element has lost focus (that is, it is not selected by the user).
onchange0	The element has either changed (such as by typing into a text field) or the element has lost focus.
onclick0	The mouse has been clicked on an element.
ondblclick()	The mouse has been double-clicked on an element.
onfocus()	The element has gotten focus.
onkeydown()	A keyboard key has been pressed down (as opposed to released) while the element has focus.
onkeypress()	A keyboard key has been pressed while the element has focus.
onkeyup()	A keyboard key has been released while the element has focus.
onload()	The element has loaded (document, frameset, or image).
onmousedown()	A mouse button has been pressed.
onmousemove()	The mouse has been moved.
onmouseout()	The mouse has been moved off of or away from an element.
onmouseover()	The mouse has moved over an element.
onmouseup()	A mouse button has been released.
onreset()	The form element has been reset, such as when a form reset button is pressed.
onresize()	The window's size has been changed.
onselect()	The text of a form element has been selected.
onsubmit()	The form has been submitted.
onunload()	The document or frameset has been unloaded.

DOM2 的进化:

DOM 0 Event	DOM 2 Event
onblur()	blur
onfocus()	focus
onchange()	change
onmouseover()	mouseover
onmouseout()	mouseout
onmousemove()	mousemove
onmousedown()	mousedown
onmouseup()	mouseup
onclick()	click
ondblclick()	dblclick
onkeydown()	keydown
onkeyup()	keyup
onkeypress()	keypress
onsubmit()	submit
onload()	load
onunload()	unload

参考：http://www.runoob.com/jsref/met-element-addeventlistener.html

           http://www.jb51.net/article/18220.htm