1

查看我的代码 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。而对于第二个盒子，它会发出警报txt1。显然在这两种情况下，虽然我调用的是同一个函数，但this指的是不同的对象。我听说，对于输入元素，元素的对象本身被传递给函数并this在事件处理函数内部被引用。如果是这样，为什么使用 setAttribute 添加事件时不正确。

4

2 回答 2

2

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

于 2012-05-04T07:29:35.217 回答
2

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

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

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

如果您使用的是支持 ECMAScript5 的环境（或使用 ES5 shim），您可以使用以下方法解决此问题Function#bind：

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

否则，您可以通过自己提供浏览器在字符串大小写中提供的函数来解决它：

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

更多阅读：

于 2012-05-04T07:32:55.887 回答