概述 .delegate( selector, eventType, handler(eventObject) )
返回值:jQuery
描述:为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。
在jQuery 3.0中,.delegate()
已被标记为弃用。从jQuery 1.7开始,它已经被.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()
方法处理事件一旦传播到文档的顶部,live事件是不可能停止传播的。同样地,.d
elegate()
事件将始终传播给其中包含的被委托元素;同时,任何在 DOM 树中,比这些元素低的元素上绑定的相同事件,在 .delegate() 事件被调用的时候,也会被触发。因此,如果要在事件中阻止委托事件被触发,可以调用event.stopPropagation()
或者返回false
防止委派处理程序冒泡。
示例
点击添加另一个段落。请注意, .delegate() 绑定所有段落的click事件 - 甚至是新的段落。
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>