1. Знакомство с агентами событий

Прокси событий использует принцип всплеска событий (всплывание событий означает, что событие будет передаваться уровень за уровнем его родительскому элементу)., добавляем событие в родительское,Судя по источнику события,Выполнение операций над соответствующими дочерними элементами,Прокси событий может, во-первых, значительно сократить количество привязок событий и повысить производительность, во-вторых, он может позволить вновь добавленным подэлементам выполнять те же операции;。

Код всплывающего события:

 <script>
    $(function(){

        var $div1 = $('#div1');
        var $div2 = $('#div2');

        $div1.click(function(){
            alert($(this).html());
        }); 

        $div2.click(function(){
            alert($(this).html());
        }); 
    });
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        Ха-ха
    </div>
</div>

проиллюстрировать:

При щелчке по дочернему элементу div его событие щелчка будет передано его родительскому элементу, а также будет запущено событие щелчка родительского элемента. Это всплытие событий.

2. Использование прокси событий

Общий способ записи событий привязки:

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Как написать агент событий

$(function(){
    $list = $('#list');
    // родительский элемент ул Приходите как агент Событие щелчка дочернего элемента li
    $list.delegate('li', 'click', function() {
        // $(this) представляет объект дочернего элемента, по которому в данный момент щелкнули.
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

delegateпараметры методапроиллюстрировать:

delegate(childSelector,event,function)

• childSelector: селектор для дочерних элементов
• событие: название события, например: «клик»
• function: функция, которая будет выполняться при возникновении события

3. Резюме

• Прокси событий заключается в использовании родительского элемента для проксирования событий дочерних элементов. Преимущество заключается в уменьшении количества привязок событий и повышении производительности.
• Сценарий использования: если к одному и тому же событию привязано несколько идентичных подэлементов, вы можете