您的位置：首页 > Web前端 > JavaScript

JS: addEventListner(attachEvent)和直接在markup中加事件(onclick, etc.)的区别

2009-11-03 20:36 656 查看

updated on 2010.06.18

之前写的这篇实在是有些肤浅，删了吧...这里更正一下

1.在markup中利用onclick = function 是DOM Level 0 的event绑定的方式。

<input id="myBtn" type="button" value="Click Me" onclick="alert("click!!!");" />

这样的赋值方式其实就是

var btn = document.getElementById("myBtn");
btn.onclick = function(){alert("Click!!!");};这里的解析，在FF和IE中其实是不相同的。

比如：

将上面的例子改成

<input id="myBtn" type="button" value="Click Me" onclick="alert(event);" />

在IE中和在FF中都能获得这个event值，但其实它们的内部机制是不一样的。

在FF中，它被解析成

//FireFox
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event);
};而在IE中，onclick所绑定的自动生成的function并不带有event参数

//IE
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(event); // event = window.event
};

2.用addEventListner(type, fn, capture/bubble)的方式称为DOM Level 2的绑定方式。

var btn = document.getElementById("myBtn");

btn.addEventListner("click", function(){alert("click!!!")}, false);//or IE method

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){alert("click!!!")});

注意到这里的function是没有参数的。但是它真的就是没有参数的吗？下面举个例子：

代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("myBtn");
if (btn.addEventListener) {
btn.addEventListener("click", function() {
//var event = arguments[0] ? arguments[0] : window.event;
alert(arguments[0]);
}, false);
}
else if (btn.attachEvent) {
btn.attachEvent("onclick", function() {
//var event = arguments[0] ? arguments[0] : window.event;
alert(arguments[0]);
});
}
};
</script>
</head>
<body>
<input id="myBtn" type="button" value="Click Me" />
</body>
</html>
在IE8和FF中，都会alert出Event Object，当然这两个Event Object不是同一个Object，从这里可以看出，如果用DOM Level 2的方式绑定Event Handler的话，他会自动添加event作为function的第一个参数。

他们之间的最大区别，套用<Professional JavaScript for web developer 2nd edition>的原话：

when assigning event handlers using DOM Level 0 method, the event handler is considered to be a method of the element.

var btn = document.getElementById("myBtn");

btn.onclick = function(){

alert(this.id); //"myBtn"

};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航