查看我的代码 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 添加事件时它不是真的。
最佳答案
当您将字符串分配给 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);
更多阅读:
关于javascript - 当以两种不同方式分配事件处理程序时,此值显示不同的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10444533/