JS onclick запускает неправильный объект - PullRequest
Новая
       16

JS onclick запускает неправильный объект

2 голосов
/ 27 марта 2010

что я пытаюсь сделать здесь, это связать объект 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.

Есть идеи, как решить эту проблему?

Спасибо за помощь!

С уважением, Клеменс

Ответы [ 2 ]

2 голосов
/ 27 марта 2010

my является глобальным, поэтому к моменту запуска события click оно всегда будет ссылаться на объект, возвращенный последним вызовом.

Вы можете сделать my локальным и определить функцию click внутри конструктора obj.

1 голос
/ 27 марта 2010

Когда вы назначаете функцию для свойства элемента DOM, например onclick, 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.

...