простая версия живой функции jquery - PullRequest
Новая
       0

простая версия живой функции jquery

3 голосов
/ 26 июля 2011

Можно ли где-нибудь получить чистую функцию javascript для обработчика событий с функциональностью, аналогичной jquery live()? Мне нужно иметь возможность прикреплять события к объектам, которые еще не созданы, но источники jquery-livequery и jquery-events бесполезны из-за зависимостей от ядра jquery.

Ответы [ 4 ]

7 голосов
/ 26 июля 2011

Делегирование событий довольно просто.Возьмите этот пример:

Разметка: 

<div id="container">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>

<button id="add">Add new paragraph</button>

Сценарий: 

document.getElementById("container").onclick = function(e) {

    // e.target is the target of the event or "source element"
    alert(e.target.innerHTML);
};

// dynamically adds new paragraph on button click
document.getElementById("add").onclick = function() {
    var p = document.createElement("p");
    p.innerHTML = "a new paragraph";
    document.getElementById("container").appendChild(p);
};

Поскольку обработчик событий присоединен к родительскому элементу, он будет работать для любых будущих вставленных элементов..

Вы можете попробовать это здесь.

Полезная ссылка:

2 голосов
/ 26 июля 2011

Да, это называется делегированием событий и существует дольше, чем jQuery и "live".

"live" работает, слушая события в теле или документе, а затем, когда происходит событие, смотрит на event.target, чтобы увидеть, соответствует ли его селектор одному из тех, которые хранятся в кэше. Это довольно неэффективно, но для некоторых работает нормально.

Более эффективный подход заключается в добавлении элементов, для которых вы хотите, чтобы прослушиватели были в массиве, а затем прослушивание пузырьковых событий для самого низкого общего предка элементов, для которых вы хотите делегировать события. Элемент body является запасным вариантом, но он наименее эффективен. Когда слушатель получает событие, которое он ожидает, проверьте, является ли event.target одним из элементов в массиве, и если это так, вызовите связанную функцию с элементом как this .

Вы также можете просто сохранить идентификатор элемента как свойство объекта, поэтому его поиск будет быстрее, если у вас много элементов или вы можете регистрировать события на основе класса.

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

1 голос
/ 26 июля 2011

Я мало знаю о Jquery и ваших функциях.Вы смотрите, как работает с событиями в JavaScript?Вы можете сделать это: 

element.addEventListener('onclick', 
function() { 
  //do something
});

или 

element.onclick =
function() { 
  //do something
});

element var является ссылкой на документ DOM.проверьте https://developer.mozilla.org/en/DOM для более подробной информации.

0 голосов
/ 26 июля 2011

JQuery - это чистый JavaScript и OpenSource, поэтому просто взгляните на источники, затем скопируйте то, что вам нужно, и адаптируйте его.

...