что стоит за делегатом () и методом live ()? - PullRequest
Новая
       18

что стоит за делегатом () и методом live ()?

4 голосов
/ 20 декабря 2010

Что стоит за методами delegate() и live() в jQuery, которые дают им возможность работать с текущими и будущими элементами на странице?

Ответы [ 3 ]

2 голосов
/ 20 декабря 2010
1 голос
/ 20 декабря 2010
Методы

jQuerys .live() и .delegate() работают по принципу, согласно которому события могут "пузыриться" вверх по дереву DOM. Это короткая история, звучит легко, ну, это действительно довольно легко. Имея структуру DOM, такую ​​как 

<html>
    <body>
        <div>
            <span>Foobar</span>
        </div>
    </body>
 </html>

Если, например, происходит щелчок по span, браузер проверяет, есть ли какие-либо event handlers, связанные с этим узлом диапазона. Если так, они будут уволены. Если эти обработчики событий не останавливают так называемый event propagation, событие всплывает. Это означает, что ваш браузер проверит, есть ли у родительского div node обработчики событий для click, прикрепленного к нему и т. Д. ...

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

Теперь метод jQuery .live() будет связывать обработчик событий (например, «щелчок») всегда с элементом <body>. Это означает, что любое событие click, которое происходит где-то на вашей странице (поскольку все остальные узлы являются дочерними от document.body), будет пузыриться до <body>, независимо от того, были ли узлы уже там во время вызова .live() или добавлены позже.

Метод .delegate() делает еще один шаг вперед. Если вы имеете дело с очень большой и глубокой структурой DOM, кажется, что с точки зрения производительности (и это действительно так!) Стоит позволить каждому событию пузыриться в полном дереве. Вы можете указать .delegate() общий родительский узел для вновь создаваемых узлов. Если, например, мы вступаем в тупик с неупорядоченным списком, к которому мы добавляем новые li узлы, достаточно присоединить любой обработчик событий к этому <ul> узлу. Все li узлы являются дочерними, поэтому их события всплывают.

0 голосов
/ 20 декабря 2010

События delegate и live подключаются к родительскому элементу или элементу body вместо конкретного элемента, в котором оно происходит.

Когда вы, например, щелкаете по элементу, событие click переходит к родительскому элементу и далее к элементу body, пока не появится обработчик onclick, который позаботится об этом. Если вы используете live для подключения события click, он будет ждать, пока событие не всплывет до элемента body, где он проверит, соответствует ли элемент, из которого произошло событие, выбранному вами селектору.

...