.delegate()
返回: jQuery
.delegate( selector, eventType, handler )
描述：针对匹配选择器的所有元素，把一个处理函数附加到一个或多个事件上，现在或者将来，基于一个指定的根元素集合。
加入于: 1.4.2
.delegate( selector, eventType, handler )加入于: 1.4.2
.delegate( selector, eventType, eventData, handler )加入于: 1.4.3
.delegate( selector, events )- selector类型：String一个选择器，用来筛选触发事件的元素。
- events类型：PlainObject一个或多个事件类型以及在这些事件上执行的函数构成的纯对象。
自从jQuery 1.7，.delegate()方法就被.on()方法取代了。然而，对于早期的版本，它依然是使用事件委托的最有效的方式。更多关于事件绑定和委托的信息，参见.on()方法的文档。一般来说，这些是针对两种方法的等效的模板：
// jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQuery 1.7+ $( elements ).on( events, selector, data, handler );
举个例子，下面的.delegate()代码：
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
等同于下面的用.on()写的代码：
$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
});
要想删除用.delegate()方法附加的事件，参见.undelegate()方法。
传递并处理事件数据的方法与它对.on()方法所作的相同。
其它说明
- 因为
.live()方法处理的事件一旦委托到document的上面，就不能再停止live事件的传播。类似地，通过delegate()方法处理的事件将传播到委托事件的元素上；当委托事件处理函数被调用时，应该已经执行了绑定在它下面的任何元素上的事件处理函数。然而，那些处理函数，可能通过调用event.stopPropagation()或者返回false来阻止触发委托的处理函数。
示例
点击一个段落文本以添加另一个段落文本。注意——.delegate()会把点击事件附加到所有的段落文本上——甚至是新创建的段落文本上。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$( "body" ).delegate( "p", "click", function() {
$( this ).after( "<p>Another paragraph!</p>" );
});
</script>
</body>
</html>
演示结果
当每个段落文本被点击时，在一个提醒框中显示它们的文本内容：
$( "body" ).delegate( "p", "click", function() {
alert( $( this ).text() );
});
要想取消一个默认操作，并阻止它向上冒泡，只要返回false：
$( "body" ).delegate( "a", "click", function() {
return false;
});
利用preventDefault方法可以只取消默认操作。
$( "body" ).delegate( "a", "click", function( event ) {
event.preventDefault();
});
也可以绑定自定义事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
color: red;
}
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
$( this ).text( "Hi there!" );
$( "span" )
.stop()
.css( "opacity", 1 )
.text( "myName = " + myName )
.fadeIn( 30 )
.fadeOut( 1000 );
});
$( "button" ).click(function() {
$( "p" ).trigger( "myCustomEvent" );
});
</script>
</body>
</html>
演示结果