$("p").off("click");
})
10.trigger方法
当我们想手动触发元素绑定的事件时可以使用trigger方法。
$("#foo").on("click",function(){
alert($(this).text());
})
$("#foo").trigger("click");还可以在绑定事件的时候出传入形参,在trigger事件的时候传入实参。
$("#foo").on("custom", function(event, param1, param2){
alert(param1 + "n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);trigger触发由jQuery.Event创建的实例:
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);甚至可以在trigger触发方法的时候传入匿名对象:
$("body").trigger({
type: "logged",
user: "foo",
pass: "bar"
});
如果想停止触发事件的传播,可通过jQuery.Event实例的stopPropgation()方法,或在任何事件中返回false。
11.triggerHandler方法
triggerHandler方法与trigger方法的不同之处在于:triggerHandler方法不会执行元素的默认事件,也不会”冒泡”。
//给一个元素绑定一个focus事件
$("input").focus(function(){
$("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
$("input").triggerHandler("focus");//不会触发focus的默认行为,即进入文本框
})
//用trigger触发
$("#id").click(function(){
$("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})12.事件冒泡和事件委托
什么是事件冒泡?
有这么一段代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
<p><a href="#foo"><span>I am a Link!</span></a></p>
<p><a href="#bar"><b><i>I am another Link!</i></b></a></p>
</div>
</body>
</html>现在,给该页面所有的元素绑定click事件,包括window和document。
$(function () {
$('*').add([document, window]).on('click', function(event) {
event.preventDefault();
console.log(this);
});
});
当单击页面任何元素,单击事件会从当前元素开始,向上一级元素传播,直到最顶级元素,这里是window。
如何阻止事件冒泡?










