live обработчики
Хотелось бы узнать, live обработчики событий используют какой-то новый стандартный метод dom для установки live событий или jQuery просто отслеживает изменения в дум, и если такое изменение произошло, то проверят подходит ли изменившаяся часть dom под селектор, заданный при установке обработика и, если подходит, то вешается обработчик?
|
1) live устарел. Используй on
2) live вешает обработчик на document, который сравнивает event.target с нужным селектором. |
2) live вешает обработчик на document, который сравнивает event.target с нужным селектором.
Че-то не понял. Можно поподробнее? |
Какой обработчик вешается на document, обработчик какого события?
|
Цитата:
|
Че-то я вас не понимаю совсем. Есть стандартный DOM метод, вешающий обработчик на какое-то событие к dom элементу, называется addEventListener по-моему. Ясно, что этот метод всего лишь один раз устанавливает обработчик к элементам и все. Поэтому и интересно, как же метод live работает, за счет чего обработчики добавляются к динамически добавленным элементам на страницу?
|
Знаю я основы и не только, причем тут основы?
|
Цитата:
Я же объяснил: обработчик вешается на 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>
|
[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] |
Цитата:
FanAizu, это называется делегирование. Есть такое понятие как погружение и всплытие событий. Тот же jQuery вешает обработчик события на document (чаще всего на отлов всплывающего события) и ловит событие в последнюю очередь, так как элемент document является самым верхним элементом, и при прослушивании всплывающих событий получает событие последним по цепи. Допустим у нас есть элемент DIV на странице, кликнув по нему. Событие получит DIV, затем элемент выше допустим BODY (это если DIV лежит сразу в нем), потом событие получит HTML-элемент, а уж затем получит document. Это и есть всплытие, а погружение работает так же но наоборот события идут от document до элемента ниже. модель всплытия: Document ↑ HTML ↑ BODY ↑ DIV Модель погружения: Document ↓ HTML ↓ BODY ↓ DIV |
| Часовой пояс GMT +3, время: 07:23. |