Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   AddEventListener не правильно работает с классами (https://javascript.ru/forum/events/63263-addeventlistener-ne-pravilno-rabotaet-s-klassami.html)

Flakky 27.05.2016 11:41

AddEventListener не правильно работает с классами
 
Может немного некорректно тему назвал, но все же..

Давайте для начала приведу код..

function Block(){ 

	this.elem; 

	this.create = function(id){ 
		body.innerHTML += "<div id='"+id+"'></div>"; //бади написал просто что бы короче было 
		
		this.elem = document.getElementById(id); 

		this.elem.addEventListener("mousedown", function(){ 
			console.log("Pressed") // То, что должно печататься при нажатии на блок 
		},false); 
	}; 

};

// Далее создаем эти блоки 

var block1 = new Block(); 
var block2 = new Block(); 
block1.create(1); //Тут обработчик события не работает вообще (но если не создавать block2, то работать будет). 
block2.create(2); //Тут обработчик события привязывается и работает.

// Если изменить порядок create(), ничего не поменяется. У block1 вообще не работает обработчик после создания block2. Даже если перед созданием block2 сделать block1.create(). Оно будет работать только до тех пор, пока не будет создан block2.



То есть проблема в том, что если элемент был создан внутри класса, и там же назначен обработчик события, то при создании ещё одной копии класса, у прошлого перестает назначаться и работать обработчик..

Я уже пытался внутри класса отдельно вывести назначение обработчика. Так же пытался другие типы (onmousedown и даже attachEvent). Ничего не помогает.

Так же пытался вне класса назначить, но тут тоже интересная ситуация:

Код:
*Код класса, но без назначение обработчика при создании* 

var block1 = new Block(); 
block1.create(1); //Просто создаем блок 1. 

var block2 = new Block(); 
block2.create(2); //Просто создаем блок 2. 

console.log(block1.elem); // Выводит: <div id='1'></div>
console.log(block2.elem); // Выводит: <div id='2'></div>
console.log(document.getElementById(1)); // Выводит: <div id='1'></div>
console.log(document.getElementById(2)); // Выводит: <div id='2'></div>

// И так и так выводятся правильные элементы


Продолжение кода:

Вот как НЕ работает
block1.elem.addEventListener("mousedown", function(){console.log("Pressed")},false); // Не работает.
block2.elem.addEventListener("mousedown", function(){console.log("Pressed")},false); // Работает.


Вот так Работает
document.getElementById(1).addEventListener("mousedown", function(){console.log("Pressed")},false); // Работает.
document.getElementById(2).addEventListener("mousedown", function(){console.log("Pressed")},false); // Работает.


Непонятно мне, почему и block.elem и document.getElementById() выводят правильные значения, но при этом обработчик работает только на второй вариант. Кстати если внутри самого create() сделать не по this.elem, а так же по гетЭлемИд, то тоже не работает.

В общем-то не понимаю тут немного логики и прошу помощи. Подозреваю, что это все именно из-за классов, но что именно, не знаю.

Буду очень благодарен за помощь.

рони 27.05.2016 12:11

Цитата:

Сообщение от Flakky
body.innerHTML +=

не делайте так, вы уничтожите прежние обработчики событий https://learn.javascript.ru/modifying-document

Flakky 27.05.2016 13:51

рони,
Благодарю, теперь все работает.

Хотя единственное не понятно, почему во втором случае не работало, когда я эвенты биндил отдельно по block.elem, но по GetElementById работало.


Часовой пояс GMT +3, время: 10:04.