jQuery中事件的相关操作-CSDN博客

jQuery中事件的相关操作

绑定事件

.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","");
}});
复制代码

.delegate()

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

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

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不常用==

解绑事件

绑定与解绑事件
- bind() unbind()
- deledae() undelegate()
- on() off()
参数
- （事件名字）要解绑的事件的名字
- （元素，事件名字）为那个元素解除那种绑定事件
示例：

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

父子元素事件解绑关系

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

注意：

父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的>时候,父级元素的事件解绑了,子级元素的事件没有解绑
但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父>级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事>件都会被解绑
复制代码

触发事件

直接调用要触发的元素的方法
使用： trigget(事件名)
使用： 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");	//文本框没有获取到焦点了
复制代码