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

updated on 2010.06.18

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

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

这样的赋值方式其实就是

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

这里的解析，在FF和IE中其实是不相同的。

比如：

将上面的例子改成

在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"
};

posted on 2009-11-03 20:36 井底之K 阅读(572) 评论(0) 收藏举报

刷新页面返回顶部

PrimerDotNet

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

公告

导航