Question

我在这里要做的是将DOM对象与JS对象的实例相关联，稍后将提供一些含义的方法;）此时我只想处理我的JS对象的click事件，同时保持其完整的参考。

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<script type="text/javascript">
// my object, which will hold a reference to a single DOM object
obj = function(domobj) {
 this.o = domobj;
 my = this;
 var ref = my.click;
 this.o.onclick = ref;

}
// my objects click function
obj.prototype.click =  function() {
  alert(my.o.innerHTML);
}

// create objects with references
$(document).ready(function() {
 o1 = new obj(document.getElementById('b1'));
 o2 = new obj(document.getElementById('b2'));
});
</script>

</head>
<body>
<button id="b1">button 1</button>
<button id="b2">button 2</button>
</body>
</html>

预期结果：点击按钮1时，应提示文字“按钮1”。

当前结果：点击按钮1时，会提示文字“按钮2”。

到目前为止我发现obj的错误实例是从click事件触发的，即使o1和o2维护对相应DOM对象的正确引用。

任何想法如何解决这个问题？

感谢您的帮助！

祝你好运，克莱门

Answer 1

my是全局的，因此当触发click事件时，它将始终引用上次调用返回的对象。

您可以使my为local，并在obj构造函数中定义click函数。

Answer 2

将函数分配给像onclick这样的DOM元素属性时，该函数中的 this （调用时）将成为DOM元素。但是，您可以使用apply和/或一点关闭来更改它。

检查一下（它仍然非常类似于你的例子，但请查看现在发生的事情的评论）：

<script type="text/javascript">
// Obj with properties of its own, including a cool DOM object
function Obj(domobj, name) {
    this.name = (typeof name==='undefined') ? 'Clemens Prerovsky' : name;
    this.o = domobj;
    // Closure time! Preserve this 'this', using 'that'
    var that = this;
    domobj.onclick = function () {return that.clickHandler();};
}
// Handler of clicks
Obj.prototype.clickHandler = function () {
    alert(this.o.innerHTML+', name:'+this.name);
}

// Create objects with references
$(document).ready(function() {
    var o1 = new Obj(document.getElementById('b1'));
    var o2 = new Obj(document.getElementById('b2'), 'npup');
});
</script>

我建议你不要错误地创建全局变量。小心并声明你的变量，这样你就不会有太多令人讨厌的惊喜。在此示例中剩下的是o1和o2个对象。

在创建循环引用时总是潜伏着令人讨厌的惊喜，如果它们没有被处理，你会冒内存泄漏的风险。以这种方式真的需要“自定义对象”吗？

HTH。

JS onclick触发了错误的对象

2 个答案: