Question

查看我的代码 http://jsfiddle.net/kxATT/3/

           function byId(id) {
               if (id) {
                   return document.getElementById(id);
               } else {
                   return null;
               }
           }

           function setAttr(elm, attr, value) {
               elm.setAttribute(attr, value);
           }

           var app = {
               id: 12,
               fn: function () {
                   alert(this.id);
               }
           };

           function init() {
               setAttr(byId('txt'), 'onclick', 'app.fn()');
               byId('txt1').addEventListener('click', app.fn, true);
           }

点击第一个框后，它会提醒12。对于第二个方框，它是alers txt1。显然在这两种情况下，虽然我调用相同的函数，但this指的是不同的对象。我听说过，对于输入元素，元素的对象本身被传递给函数，并在事件处理函数内被称为this。如果是这样的话，为什么在使用setAttribute添加事件时不是这样。

Answer 1

this上下文是一个事件处理程序中的对象，另一个是input元素，其中id属性对应于input元素的{{ 1}}属性。

Answer 2

当您为onclick分配字符串时，您基本上是在创建函数的 body ;浏览器提供功能，例如你的字符串"app.fn()"变为：

function onclickHandlerCreatedByBrowser(event) {
    app.fn();
}

当你通过addEventListener分配一个函数引用时，就像你在JavaScript中使用函数引用一样，只是一个函数引用;没有对象信息。 JavaScript中的this完全取决于函数的调用方式，而不是函数的定义。

如果您使用的是启用ECMAScript5的环境（或使用ES5垫片），则可以使用Function#bind解决此问题：

byId('txt1').addEventListener('click', app.fn.bind(app), true);

否则，您可以通过提供浏览器在字符串案例中提供的功能来解决它：

byId('txt1').addEventListener('click', function() {
    app.fn();
}, true);

更多阅读：

当以两种不同的方式分配事件处理程序时，此值显示不同的结果

2 个答案: