Форум

FanAizu · #1 (**permalink**) 30.03.2013, 12:44

Хотелось бы узнать, live обработчики событий используют какой-то новый стандартный метод dom для установки live событий или jQuery просто отслеживает изменения в дум, и если такое изменение произошло, то проверят подходит ли изменившаяся часть dom под селектор, заданный при установке обработика и, если подходит, то вешается обработчик?

danik.js · #2 (**permalink**) 30.03.2013, 13:02

1) live устарел. Используй on
2) live вешает обработчик на document, который сравнивает event.target с нужным селектором.

FanAizu · #3 (**permalink**) 30.03.2013, 13:07

2) live вешает обработчик на document, который сравнивает event.target с нужным селектором.

Че-то не понял. Можно поподробнее?

FanAizu · #4 (**permalink**) 30.03.2013, 13:08

Какой обработчик вешается на document, обработчик какого события?

danik.js · #5 (**permalink**) 30.03.2013, 13:13

Сообщение от FanAizu

Хотелось бы узнать, live обработчики событий используют

Какие обработчики, каких событий?

FanAizu · #6 (**permalink**) 30.03.2013, 13:23

Че-то я вас не понимаю совсем. Есть стандартный DOM метод, вешающий обработчик на какое-то событие к dom элементу, называется addEventListener по-моему. Ясно, что этот метод всего лишь один раз устанавливает обработчик к элементам и все. Поэтому и интересно, как же метод live работает, за счет чего обработчики добавляются к динамически добавленным элементам на страницу?

FanAizu · #7 (**permalink**) 30.03.2013, 13:33

Знаю я основы и не только, причем тут основы?

danik.js · #8 (**permalink**) 30.03.2013, 14:12

Сообщение от FanAizu

за счет чего обработчики добавляются к динамически добавленным элементам на страницу?

Никак они не добавляются. Можешь в инспекторе проверить даже.
Я же объяснил: обработчик вешается на document. В event.target передается ссылка на элемент, на котором возникло событие.

<head>
<script>
function elementMatchesSelector(element, selector) {
    return (element.webkitMatchesSelector ||
        element.mozMatchesSelector ||
        element.oMatchesSelector ||
        element.msMatchesSelector).call(element, selector);
}
function live(selector, eventType, handler) {
    document.addEventListener(eventType, function(e) {
        if (elementMatchesSelector(e.target, selector)) {
            handler.call(e.target, e);
        }
    });
}
</script>
</head>
<body>
<script>    
    live('button', 'click', function() {
        alert('It works!!!');
    });
    
    var button = document.createElement('button');
    button.textContent = 'Кнопка';
    document.body.appendChild(button);
</script>
</body>

Octane · #9 (**permalink**) 30.03.2013, 20:06

[offtop]
где-то читал про реализацию querySelectorAll для старых IE через стили, увидев это сообщения, сразу же в голову пришло, как сделать matchesSelector

function ieMatchesSelector(element, selector) {
	var css = document.styleSheets[document.styleSheets.length - 1],
		index = css.length, result = false;
	css.addRule(selector, "fake:1", index);
	if (element.currentStyle.fake) {
		result = true;
	}
	css.removeRule(index);
	return result;
}

alert(ieMatchesSelector(document.body, "html body"));

ну так… чтобы было

[/offtop]

devote · #10 (**permalink**) 31.03.2013, 02:40

Сообщение от nasqad

вам стоит изучить основы языка

насмешил))) Событийная модель к основам языка не относится.

FanAizu,
это называется делегирование. Есть такое понятие как погружение и всплытие событий. Тот же jQuery вешает обработчик события на document (чаще всего на отлов всплывающего события) и ловит событие в последнюю очередь, так как элемент document является самым верхним элементом, и при прослушивании всплывающих событий получает событие последним по цепи.

Допустим у нас есть элемент DIV на странице, кликнув по нему. Событие получит DIV, затем элемент выше допустим BODY (это если DIV лежит сразу в нем), потом событие получит HTML-элемент, а уж затем получит document. Это и есть всплытие, а погружение работает так же но наоборот события идут от document до элемента ниже.

модель всплытия:

Document
   ↑	
  HTML
   ↑	
  BODY
   ↑	
  DIV

Модель погружения:

Document
   ↓	
  HTML
   ↓	
  BODY
   ↓	
  DIV

Форум

Справочник

Discord чат

Курсы javascript