Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2016, 11:41
Новичок на форуме
Отправить личное сообщение для Flakky Посмотреть профиль Найти все сообщения от Flakky
 
Регистрация: 12.05.2016
Сообщений: 8

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, а так же по гетЭлемИд, то тоже не работает.

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

Буду очень благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 27.05.2016, 12:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,981

Сообщение от Flakky
body.innerHTML +=
не делайте так, вы уничтожите прежние обработчики событий https://learn.javascript.ru/modifying-document
Ответить с цитированием
  #3 (permalink)  
Старый 27.05.2016, 13:51
Новичок на форуме
Отправить личное сообщение для Flakky Посмотреть профиль Найти все сообщения от Flakky
 
Регистрация: 12.05.2016
Сообщений: 8

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает console.log.apply(this,arguments) - Почему? Почемучкин Javascript под браузер 9 31.10.2014 16:17
Ajax при заходе на страницу из поисковика - не работает Алексей_ГР Ваши сайты и скрипты 2 02.09.2013 23:03
не работает addEventListener в iframe irvin12345 Общие вопросы Javascript 3 12.06.2013 16:37
Скрипт не работает при заходе на данную страницу, но работает при рефреше страницы foker jQuery 0 26.11.2012 10:27
Скрипт правильно работает только один раз, после начинает выдавать ошибку. xodock Events/DOM/Window 2 23.07.2012 12:04