jQuery - 理解事件代理

事件代理允许将单个的时间监听器，附加到父元素上，该事件会被所有该父元素的匹配的后代元素触发，无论该后代元素是当前存在的，或者是后续添加的。

示例：

    

        
Item #1
        
Item #2
        
Item #3
        
Item #4
    

// 附件事件处理函数
$( "#list a" ).on( "click", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

// 在当前列表中加入新的元素
$( "#list" ).append( "
Item #5
" );

当点击新加入的元素时，什么也不会发生。原因是先前加入的直接绑定事件处理函数。直系事件只会在 .on() 方法被呼叫时，附加在元素上。由于新加入的元素，在 .on() 方法被呼叫时，还不存在，所以该新加入的元素上不会附加事件处理函数。

事件传播 Event Propagation

如示例元素，当 被点击后，事件会冒泡传布至真个 DOM 树中，事件的传播顺序为：

4. • document root

此种方式意味着，每次点击 元素，实际上是点击了真个文档体。这种模式称作：event bubbling 或者 event propagation。

// 附加代理事件处理函数
$( "#list" ).on( "click", "a", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

使用触发元素

$( "#list" ).on( "click", "a", function( event ) {
    var elem = $( this ); // 代表  元素
    // 检测  元素的 href 属性是否为 http 起始
    if ( elem.is( "[href^='http']" ) ) {
        elem.attr( "target", "_blank" );
    }
});

// 简写方式
$( "#list" ).on( "click", "a[href^='http']", function( event ) {
    $( this ).attr( "target", "_blank" );
});