jQuery - 理解事件代理

最新推荐文章于 2024-06-10 17:00:16 发布

瘦毛毛

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量1.4k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u013275171/article/details/86571433

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

示例：

<html>
<body>
<div id="container">
    <ul id="list">
        <li><a href="http://domain1.com">Item #1</a></li>
        <li><a href="/local/path/1">Item #2</a></li>
        <li><a href="/local/path/2">Item #3</a></li>
        <li><a href="http://domain4.com">Item #4</a></li>
    </ul>
</div>
</body>
</html>

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

// 在当前列表中加入新的元素
$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );

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

事件传播 Event Propagation

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

<a>
<li>
<ul #list>
<div #container>
<body>
<html>
document root

此种方式意味着，每次点击 <a> 元素，实际上是点击了真个文档体。这种模式称作：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 ); // 代表 <a> 元素
    // 检测 <a> 元素的 href 属性是否为 http 起始
    if ( elem.is( "[href^='http']" ) ) {
        elem.attr( "target", "_blank" );
    }
});

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

瘦毛毛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery - 理解事件代理

事件代理允许将单个的时间监听器，附加到父元素上，该事件会被所有该父元素的匹配的后代元素触发，无论该后代元素是当前存在的，或者是后续添加的。示例：&lt;html&gt;&lt;body&gt;&lt;div id="container"&gt; &lt;ul id="list"&gt; &lt;li&gt;&lt;a href="ht
复制链接

扫一扫

专栏目录