Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2014, 17:53
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Делегирование события
Приветсвую всех, уважаемые пользователи форума!

Написал такой скрипт для делегирования событий:

(function() {
	var d = document.documentElement,
		m = d.matchesSelector || d.webkitMatchesSelector || d.oMatchesSelector || d.mozMatchesSelector || d.msMatchesSelector;
	
	Element.prototype.addEventDelegate = function(type, selector, fn) {
		this.addEventListener(type, function(e) {
			e = e && e.target || window.event.srcElement;
			if(m.call(e, selector)) {
				fn.call(e);
			}
		}, false);
	}
})();


window.onload = function() {
	document.body.addEventDelegate('click', 'p', function() {
		alert('Вы кликнули по тэгу "p"!');
	});
}


Всё работает, но... когда кликаешь по более вложенному элементу, то событие для родительского элемента не срабатывает. Нужно, чтобы всё работало как в jQuery. Кто-нибудь знает, как более грамотно так сделать?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2014, 18:35
Профессор
Отправить личное сообщение для BallsShaped Посмотреть профиль Найти все сообщения от BallsShaped
 
Регистрация: 14.09.2012
Сообщений: 162

Сообщение от Ruslan_xDD
когда кликаешь по более вложенному элементу, то событие для родительского элемента не срабатывает.
Странный вывод. Не важно, насколько вложен элемент. Проверяешь на соотв-ие селектору ты только элемент, по которому кликнули. Очевидно, нужно проверять все элементы от e.target до this.
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2014, 22:29
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

while (e != this) {
            //работаем
            e = e.parentNode;
}

BallsShaped,
правильно ответил
Ответить с цитированием
  #4 (permalink)  
Старый 07.01.2014, 22:46
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

К слову в черновик метод попал под именем matches(), так что исправь. Пока что все браузеры используют старые префикснутые matchesSelector()

Вобще странно. Тогда и document.querySelector() надо было переименовать в document.query()
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 09.01.2014, 13:26
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

(function() {
	var d = document.documentElement,
		m = d.matchesSelector || d.webkitMatchesSelector || d.oMatchesSelector || d.mozMatchesSelector || d.msMatchesSelector || d.matches;
	
	Element.prototype.addEventDelegate = function(type, selector, fn) {
		this.addEventListener(type, function(e) {
			e = e && e.target || window.event.srcElement;
			if(m.call(e, selector + ', ' + selector + ' *')) {
				fn.call(e);
			}
		}, false);
	}
})();


Вот так пока сделал, но думаю, что сделаю по другому как время будет.
Ответить с цитированием
  #6 (permalink)  
Старый 09.01.2014, 13:28
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Poznakomlus, спасибо, суть уловил.
Ответить с цитированием
  #7 (permalink)  
Старый 09.01.2014, 14:58
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Ruslan_xDD
d.matchesSelector
Нет такого свойства. И не будет никогда. Читай мой коммент.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 09.01.2014, 15:13
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

danik.js, понял.

Доделал.
(function() {
	var d = document.documentElement,
		m = d.matches || d.webkitMatchesSelector || d.oMatchesSelector || d.mozMatchesSelector || d.msMatchesSelector;
	
	Element.prototype.addEventDelegate = function(type, selector, fn) {
		this.addEventListener(type, function(e) {
			var t = e && e.target || window.event.srcElement;
			while(t != this) {
				if(m.call(t, selector)) {
					fn.call(t, e);
					break;
				}
				t = t.parentNode;
			}
		}, false);
	}
})();
Ответить с цитированием
  #9 (permalink)  
Старый 09.01.2014, 15:31
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Ruslan_xDD, хотя фиг его знает)) Мож до релиза еще раз пять сменят название ))
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 09.01.2014, 15:38
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

danik.js, только вот хрен знает как будет работать, если браузер вообще не поддерживает matches. Может как-нибудь через querySelector запилить?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запрет события Click на дочернем элементе, кот. находится за рамками родителя Smokvin Events/DOM/Window 11 10.11.2013 01:53
Алгоритм работы обработчика события salikoff Events/DOM/Window 1 20.09.2012 23:46
Создание глобального события kez jQuery 1 17.09.2012 11:49
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 15:11
Передача параметров в колбэки и дальнейшее их вешанье на события. Gremlin Общие вопросы Javascript 17 13.08.2011 08:54