2010-03-26 3 views
2

то, что я пытаюсь сделать здесь, - связать объект DOM с экземпляром объекта JS, который позже предоставит некоторые методы определения смысла;) В этот момент я просто хочу обрабатывать свой JS объект события щелчка, сохраняя его ссылки нетронутыми.JS onclick запускает неправильный объект

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

Любые идеи, как это решить?

Благодарим за помощь!

С наилучшими пожеланиями, Clemens

ответ

1

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

+0

Привет, ребята, спасибо за помощь. Очевидно, я не понимал, как правильно использовать замыкания, несмотря на создание глобальной переменной случайно: - /. Пользовательские объекты необходимы, поскольку они представляют собой отдельные экземпляры встроенного редактора с различными настройками (различные кнопки форматирования и т. Д.). В любом случае - теперь я понял суть - большое спасибо! – blacktarmac

2

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

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

Смежные вопросы