事件代理允许将单个的时间监听器,附加到父元素上,该事件会被所有该父元素的匹配的后代元素触发,无论该后代元素是当前存在的,或者是后续添加的。
示例:
<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" );
});