Javascript jsonclick触发错误的对象_Javascript_Prototype_Reference_Onclick

Javascript jsonclick触发错误的对象

javascript reference

Javascript jsonclick触发错误的对象,javascript,prototype,reference,onclick,Javascript,Prototype,Reference,Onclick,我在这里尝试的是将DOM对象与JS对象的实例相关联，这将在稍后提供一些有意义的fol方法；）此时，我只想处理我的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

我在这里尝试的是将DOM对象与JS对象的实例相关联，这将在稍后提供一些有意义的fol方法；）此时，我只想处理我的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>


在此处插入标题
//my对象，它将保存对单个DOM对象的引用
obj=功能（domobj）{
这个.o=domobj；
我的=这个；
var ref=my.click；
此.o.onclick=ref；
}
//我的对象单击功能
obj.prototype.click=函数（）{
警报（my.o.innerHTML）；
}
//使用引用创建对象
$（文档）.ready（函数（）{
o1=新的obj（document.getElementById（'b1'）；
o2=新的obj（document.getElementById（'b2'）；
});
按钮1
按钮2

预期结果：单击按钮1时，文本“按钮1”应发出警报

当前结果：单击按钮1时，文本“按钮2”发出警报

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

有什么办法解决这个问题吗

谢谢你的帮助

致以最良好的祝愿，

Clemens

my

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

您可以将

my

设置为本地，并在obj构造函数中定义click函数。

当您将函数分配给DOM元素属性（如

onclick

）时，该函数中的this（调用时）将成为DOM元素。但是，您可以通过使用

apply

和/或一个小闭包来改变这一点

看看这个（它仍然与您的示例非常相似，但请参见注释了解现在的情况）：


//Obj具有自己的属性，包括一个很酷的DOM对象
函数Obj（domobj，名称）{
this.name=（typeof name=='undefined'）？'Clemens Prerovsky'：name；
这个.o=domobj；
//关闭时间！保存此“this”，使用“that”
var=这个；
domobj.onclick=function（）{返回that.clickHandler（）；}；
}
//点击处理程序
Obj.prototype.clickHandler=函数（）{
警报（this.o.innerHTML+'，名称：'+this.name）；
}
//使用引用创建对象
$（文档）.ready（函数（）{
var o1=新的Obj（document.getElementById（'b1'）；
var o2=新的Obj（document.getElementById（'b2'），'npup'）；
});

我敦促您不要错误地创建全局变量。注意声明你的变量，这样你就不会有那么多令人讨厌的意外。本例中剩下的是

o1

和

o2

对象

在创建循环引用时，总是会出现令人不快的意外情况，如果处理不当，就会有内存泄漏的风险。以这种方式真的需要“自定义对象”吗

HTH.

大家好，谢谢你们的帮助。很明显，我不知道如何正确使用闭包，尽管意外地创建了一个全局变量：-/。需要自定义对象，因为它们表示内联编辑器的各个实例，具有各种设置（不同的格式按钮等）。不管怎样，现在我明白了，非常感谢！

<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>