摘自: http://www.douban.com/note/235086917/
http://jackleechina.iteye.com/blog/1595397
为什么一般要采用事件监听而不是直接对元素的事件属性（如：onclick、onmouseover）赋值？
原来用事件属性只能赋值一种方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了
而使用添加事件监听的方式就可以实现并行。特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。使用事件属性则很容易造成事件覆盖掉
使用事件监听有两种方式：attachEvent和addEventListener
attachEvent与addEventListener区别
适应的浏览器版本不同，同时在使用的过程中要注意
attachEvent方法 按钮onclick
addEventListener方法 按钮click
attachEvent方法， （ie系列）
addEventListener方法 Mozilla系列
例子如下:
相关衍生阅读:
http://jackleechina.iteye.com/blog/1595397
为什么一般要采用事件监听而不是直接对元素的事件属性（如：onclick、onmouseover）赋值？
原来用事件属性只能赋值一种方法，即：
button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了
而使用添加事件监听的方式就可以实现并行。特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。使用事件属性则很容易造成事件覆盖掉
使用事件监听有两种方式：attachEvent和addEventListener
attachEvent与addEventListener区别
适应的浏览器版本不同，同时在使用的过程中要注意
attachEvent方法 按钮onclick
addEventListener方法 按钮click
attachEvent方法， （ie系列）
addEventListener方法 Mozilla系列
例子如下:
1![]()
<!DOCTYPE html>
2![]()
<html>
3![]()
4![]()
<SCRIPT LANGUAGE="JavaScript">
5![]()
function method1(){
6![]()
alert("method1");
7![]()
}
8![]()
function method2(){
9![]()
alert("method2");
10![]()
}
11![]()
function method3(){
12![]()
alert("method3");
13![]()
}
14![]()
</SCRIPT>
15![]()
<body>
16![]()
<input type="button" value="dom 元素事件属性绑定的按钮" id="button1"/>
17![]()
<input type="button" value="IE浏览器: attachEvent进行事件绑定的按钮" id="btn1"/>
18![]()
<input type="button" value="火狐浏览器: addEventListener进行事件绑定的按钮" id="btn2"/>
19![]()
20![]()
<SCRIPT LANGUAGE="JavaScript">
21![]()
/**方法一: 使用元素的事件属性. [这种方式事件只可绑定一次,最后绑定的执行]**/
22![]()
button1.onclick = function() { alert("1-1"); };
23![]()
button1.onclick = function() { alert("1-2"); };
24![]()
/**方法二: 使用attachEvent注册事件. 格式如下object.attachEvent(event,function);**/
25![]()
var btn1Obj = document.getElementById("btn1");
26![]()
btn1Obj.attachEvent("onclick", method1);
27![]()
btn1Obj.attachEvent("onclick", method2);
28![]()
btn1Obj.attachEvent("onclick", method3);
29![]()
/**方法三: addEventListener. 格式如下element.addEventListener(type,listener,useCapture);**/
30![]()
var btn2Obj = document.getElementById("btn2");
31![]()
btn2Obj.addEventListener("click",method1,false);
32![]()
btn2Obj.addEventListener("click",method2,false);
33![]()
btn2Obj.addEventListener("click",method3,false);
34![]()
//执行顺序为method1->method2->method3
35![]()
</SCRIPT>
36![]()
<br/>attachEvent按照注册倒叙执行: 执行顺序为method3->method2->method1
37![]()
<br/>addEventListener按照注册顺序执行: 执行顺序为method1->method2->method3
38![]()
</body>
39![]()
</html>
<!DOCTYPE html>2
<html>3
4
<SCRIPT LANGUAGE="JavaScript">
5
function method1(){
6
alert("method1");7
}8
function method2(){9
alert("method2");10
}11
function method3(){12
alert("method3");13
}14
</SCRIPT>15
<body>16
<input type="button" value="dom 元素事件属性绑定的按钮" id="button1"/>17
<input type="button" value="IE浏览器: attachEvent进行事件绑定的按钮" id="btn1"/>18
<input type="button" value="火狐浏览器: addEventListener进行事件绑定的按钮" id="btn2"/>19
20
<SCRIPT LANGUAGE="JavaScript">21
/**方法一: 使用元素的事件属性. [这种方式事件只可绑定一次,最后绑定的执行]**/22
button1.onclick = function() { alert("1-1"); };23
button1.onclick = function() { alert("1-2"); };24
/**方法二: 使用attachEvent注册事件. 格式如下object.attachEvent(event,function);**/25
var btn1Obj = document.getElementById("btn1");26
btn1Obj.attachEvent("onclick", method1);27
btn1Obj.attachEvent("onclick", method2);28
btn1Obj.attachEvent("onclick", method3);29
/**方法三: addEventListener. 格式如下element.addEventListener(type,listener,useCapture);**/30
var btn2Obj = document.getElementById("btn2");31
btn2Obj.addEventListener("click",method1,false);32
btn2Obj.addEventListener("click",method2,false);33
btn2Obj.addEventListener("click",method3,false);34
//执行顺序为method1->method2->method335
</SCRIPT>36
<br/>attachEvent按照注册倒叙执行: 执行顺序为method3->method2->method1 37
<br/>addEventListener按照注册顺序执行: 执行顺序为method1->method2->method3 38
</body>39
</html>相关衍生阅读:
浙公网安备 33010602011771号