在页面标签内部调用事件与事件侦听器绑定事件的不同

DK 于2010,04,29发表 | 7 评论 »

我们在给元素添加事件的时候可能会用到三种方法：

1.直接写到dom文档中：

<div id="myDiv" onclick="myFunc()"></div>

2.使用元素的事件属性赋值：

node.onclick = myFunc;

3.使用事件侦听器：
node.addEventListener('click',myFunc,false);//W3C的方法
node.attachEvent('onclick',myFunc);//IE

我们将myFunc定义为
  1. function myFunc(){
  2. alert(this);
  3. }

不知道你注意过没有，用第一种方法与第二以及第三种方法触发事件时this指代的值是不同的。

根据我们的理解当元素触发事件时，调用我们自定义方法的对象为我们触发事件的元素，this指代的应该为当前元素。当我们使用第二和第三种方法时候这么说是没问题的，提示框提示的也是当前的元素。但是通过第一种方法执行的时候提示框提示的却是window对象！这是为什么呢？是出现bug了吗？事实上不是的。

如果我们使用调试工具查看一下元素的onclick属性你会发现它们之间的不同。

第一种情况：

node.onclick = function(){
omyFunc();
}

第二种情况：
  1. node.onclick = function(){
  2. oalert(this);
  3. }

第三种情况：

在IE下面用attachEvent方法添加事件的时候内部的this指代的是window对象，不知道到IE在想什么，呵呵。但是addEventListener中this指代的是当前的事件对象，当然IE下面你可以用别的办法解决这个问题。

现在应该清楚了，第一种情况的时候相当于在onclick属性中执行的是我们定义的myFunc方法，而调用myFunc函数的对象为 window，所以this也就是window。而第二和第三种情况则相当于将myFunc函数对象赋给onclick属性，当触发事件时执行的是 myFunc函数内部的代码，调用对象为当前的对象，所以this也就是当前的node。

不知道你在写javascript的时候碰到过这个问题没有？

转载请注明原文出处《在页面标签内部调用事件与事件侦听器绑定事件的不同》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

标签: , | 分类： Javascript, 编程