Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.11.2011, 23:44
Новичок на форуме
Отправить личное сообщение для hoovers Посмотреть профиль Найти все сообщения от hoovers
 
Регистрация: 08.11.2011
Сообщений: 1

Проблемма с addEventListener/attachEvent
Доброго времени суток!

Имеется базовый класс CommonClass, в конструктор которого передается id элемента. В конструкторе класса, внутри элемента с id, переданного в качестве параметра, по средствам ф-ции innerHTML вставляется другой элемент(в данном случае DIV). Свойство класса dom содержит объект DOM вставляемого элемента. Так же, базовый класс имеет несколько методов, описанных через прототипы, в частности метод addEvent, осуществляющий добавление обработчиков событий к элементу, созданному внутри конструктора класса CommomnClass. DIVClass наследник класса CommonClass.

Код:
function randomString(len, charSet){ 
	charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; 
    var randomString = ''; 
    for(var i = 0; i < len; i++){ 
    	var randomPoz = Math.floor(Math.random() * charSet.length); 
    	randomString += charSet.substring(randomPoz, randomPoz+1); 
    } 
    return randomString; 
} 

function extend(Child, Parent) {
	var F = function() { };
	F.prototype = Parent.prototype;
	Child.prototype = new F();
	Child.prototype.constructor = Child;
	Child.superclass = Parent.prototype;
}

////
//CommonClass
//
function CommonClass (id){
	this.guid = randomString(8);
	
	var owner = document.getElementById(id);
	owner.innerHTML = owner.innerHTML+(' <div id ="'+this.guid+'"></div>');
	
	this.dom = document.getElementById(this.guid);
	
	this.content = '';
}

CommonClass.prototype.draw = function(){this.dom.innerHTML = this.content;};

CommonClass.prototype.addEvent = function(event, handler, useCapture){
    if (this.dom.addEventListener) {
    	this.dom.addEventListener(event, handler, useCapture ? useCapture : false);
    } else if (this.dom.attachEvent) {
    	this.dom.attachEvent('on' + event, handler);
    } else alert("Add handler is not supported");
};

CommonClass.prototype.removeEvent = function(event, handler) {
    if (this.dom.removeEventListener) {
    	this.dom.removeEventListener(event, handler, false);
    } else if (this.dom.detachEvent) {
    	this.dom.detachEvent('on' + event, handler);
    } else alert("Remove handler is not supported");
};


////
// DIVClass
//
function DIVClass(id){
	DIVClass.superclass.constructor.call(this, id); 
}
extend(DIVClass, CommonClass);

DIVClass.prototype.draw = function (){
	this.content = '<div style="float: left; width: 300px; height: 300px; "></div>';
	DIVClass.superclass.draw.apply(this);
};


Собственно проблема:

Для примера рассмотрим следующий код
<body>
	
	<div id = "Foo" > </div>  
	
	<script>

		function event_a ( event ){alert('a')};        //событие а

		var a = new DIVClass('Foo');                     //создание объекта а

		a.addEvent( 'mousemove', event_a );         //добавление события onMouseMove
		
		a.draw();

	</script>
	
</body>


Все прекрасно работает: создается DIV, на событие onMouseMove вешается обработчик event_a
При наведении мыши на созданный DIV срабатывает оное событие, видим alert('a').

Если же создать еще один объект класса DIVClass, например b
<body>
	
	<div id = "Foo" > </div>  
	
	<script>

		function event_a ( event ){alert('a')};        //событие а

		var a = new DIVClass('Foo');                     //создание объекта а

		a.addEvent( 'mousemove', event_a );         //добавление события onMouseMove
		
		a.draw();

		var b = new DIVClass('Foo');


	</script>
	
</body>


то обработчик события event_a для объекта a перестает срабатывать

Однако, если объекту b добавить обработчик события onMouseMove (или любого другого события) он будет вызван.
<body>
	
	<div id = "Foo" > </div>  
	
	<script>

		function event_a ( event ){alert('a')};        //событие а
		function event_b ( event ){alert('b')};        //событие b

		var a = new DIVClass('Foo');                     //создание объекта а

		a.addEvent( 'mousemove', event_a );         //добавление события onMouseMove
		
		a.draw();

		var b = new DIVClass('Foo');

		b.addEvent( 'mousemove', event_b );

		b.draw();
	</script>
	
</body>

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

Уважаемые форумчане, пожалуйста помогите разобраться с проблемой и решить, каким образом сделать так, чтобы обработчики срабатывали для всех объектов а не только для последнего созданного.

Большое спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2011, 00:22
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

hoovers, никто не будет разбираться в стене кода, но, судя по специфике проблемы, вам нужно почитать про замыкания.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблемма с jQuery alextet jQuery 2 09.05.2012 10:31
Проблемма c readyState и status 5Seven AJAX и COMET 5 21.02.2010 19:23
Проблемма с JS и onmousemove в ИЕ Dimamerk Events/DOM/Window 2 29.08.2009 00:42
В Mozilla Firefox 3.0 проблемма с Javascript меню artmedia Элементы интерфейса 1 07.09.2008 10:43
проблемма с select DimaBY Элементы интерфейса 4 22.08.2008 15:14