摘自: 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![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
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![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
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>
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
2
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
3
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
4
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif)
5
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
6
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
7
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockEnd.gif)
8
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
10
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockEnd.gif)
11
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
12
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
13
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif)
14
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
15
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
16
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
17
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
18
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
19
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
20
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockStart.gif)
21
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
23
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
24
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
25
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
26
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
27
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
28
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
29
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedSubBlockStart.gif)
30
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
31
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
32
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
33
![](http://www.blogjava.net/images/OutliningIndicators/InBlock.gif)
34
![](http://www.blogjava.net/images/OutliningIndicators/ExpandedBlockEnd.gif)
35
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
36
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
37
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
38
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
39
![](http://www.blogjava.net/images/OutliningIndicators/None.gif)
相关衍生阅读: