jQuery中事件的相关操做

jQuery中事件的相关操做

绑定事件

1. .bind()

• 能够为元素同时绑定多个事件
• 第一个参数是：事件名字,
• 第二个参数是：事件处理函数-匿名函数

绑定一个事件 .bind( "事件名" , "处理函数" ) 绑定多个事件 .bind( { "事件名": "处理函数" , "事件名": "处理函数" , "事件名": "处理函数" } )

//绑定单个事件
 $("#btn").bind("click",function () {
	alert("我被点了");
});

 //bind()方法能够为元素同时绑定多个事件
$("#btn").bind({"click":function(){
	alert("我被点了");
},"mouseover":function(){
	$(this).css("backgroundColor","red");
},"mouseout":function(){
	$(this).css("backgroundColor","");
}});
复制代码

2. .delegate()

• 参数1.要绑定事件的元素---p
• 参数2.要绑定的事件的名字---click
• 参数3.绑定事件的处理函数---匿名函数

//给div标签里面的p标签添加事件
$("#dv").delegate("p","click",function () {
	alert("我被点了");
})
复制代码

3. on()

• 两个参数
  • 1事件的名字
  • 2事件处理函数
• 三个参数
  • 1,事件的名字
  • 2.要绑定事件的元素--p
  • 3事件处理函数

父级元素.on("事件类型","子级元素",事件处理函数);

$("#btn").on("click",function () {
	//建立p添加到div中
	$("#dv").append($("<p>这是一个p</p>"));
	
	//为div中的p标签绑定事件
	$("#dv").on("click","p",function () {
		alert("我被点了");
	});
});
复制代码

注意： 在实际的应用中，通常状况下on比较经常使用，bind与delegate不经常使用

解绑事件

1. 绑定与解绑事件

   • bind() unbind()
   • deledae() undelegate()
   • on() off()

2. 参数

   • （事件名字）要解绑的事件的名字
   • （元素，事件名字）为那个元素解除那种绑定事件

3. 示例：

$("#dv").unbind("click");
$("#dv").undelegate("click");
$("#dv").off("click");
复制代码

4. 父子元素事件解绑关系

//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
$("#dv").off("click","**");
//移除父级元素和子级元素的全部的事件
$("#dv").off();
复制代码

注意：

父级元素和子级元素都是经过正常的方式绑定事件,若是经过off解绑的>时候,父级元素的事件解绑了,子级元素的事件没有解绑

可是:若是子级元素是经过父级元素调用delegate的方式绑定的事件,父>级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事>件都会被解绑
复制代码

触发事件

1. 直接调用要触发的元素的方法
2. 使用： trigget(事件名)
3. 使用： triggerHandler(事件名)

$(function () {
	$("#btn1").click(function () {
		$(this).css("backgroundColor","red");
	});
	
	//点击第二个按钮-触发第一个按钮的点击事件
	$("#btn2").click(function () {
	
		//触发事件--3三种方式
		$("#btn1").click();
		
		$("#btn1").trigger("click");//触发事件
		
		$("#btn1").triggerHandler("click");//触发事件
	});
});
复制代码

注意：trigger() 与 triggerHandler() 区别

trigger() 会触发浏览器的默认行为，并执行事件 triggrtHandler() 不会触发浏览器默认行为，可是会执行事件 例如：获取到焦点是浏览器的默认行为

$("#txt").trigger("focus");		//文本框获取到焦点了
$("#txt").triggerHandler("focus");	//文本框没有获取到焦点了
复制代码

事件对象

$("div").on("click",function(event){} )

• event.delegateTarget：代码绑定事件的对象
• event.currentTarget：绑定事件的对象
• event.target：真正触发事件的对象

取消冒泡事件与默认事件

取消冒泡事件

1. event.stoPropagation()
2. return false

取消默认事件

1. event.preventDefault()
2. return false;

例如能够取消a标签的默认事件 $("a").preventDefault()