[JavaScript知识库]jQuery中的事件

事件绑定 bind()

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数

$("p").bind("click",function(){
    alert("这个段落被点击了。");
});

• 第一个参数表示要绑定的事件，多个事件中间用空格隔开
• 第二个参数是需要执行的函数

绑定多个事件

$(".head").bind("mouseover mouseout",function(){
	$(this).next().slideToggle()
})

$(".head").bind({
	mouseover:function(){
		$(this).next().slideDown()
	},
	mouseout:function(){
		$(this).next().slideUp()
	}
})

合成事件

1. hover()当鼠标指针悬停在被选元素上时要运行的两个函数。
   会触发mouseover mouseout两个事件

$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

2. toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。

$("button").click(function(){
    $("p").toggle();
});

事件冒泡

当子元素和父元素绑定相同事件时，会一级一级触发，这时候就需要阻止事件冒泡
event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

$("span").click(function(event){
	event.stopPropagation();
	alert("The span element was clicked.");
});
$("p").click(function(event){
	alert("The p element was clicked.");			//点击span时不会触发p标签的事件
});

event.preventDefault() 方法阻止元素发生默认的行为

$("a").click(function(event){		//阻止超链接跳转
    event.preventDefault();	//或者 return false
});

移除事件绑定

unbind() 方法移除被选元素的事件处理程序。

$("button").click(function(){
	$("p").unbind("click");		//移除点击事件
});

移除某个事件绑定

$("#btn").bind("click", myFun1 = function(){
	$("#test").append("<p>我的绑定函数1</p>")
}).bind("click", myFun2 = function(){
	$("#test").append("<p>我的绑定函数2</p>")
}).bind("click", myFun3 = function(){
	$("#test").append("<p>我的绑定函数3</p>")
})
				
$("#delAll").click(function(){
	$("#btn").unbind("click",myFun2)		//第二个参数是函数名
})