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"); //文本框没有获取到焦点了
事件对象
$(“div”).on(“click”,function(event){} )
- event.delegateTarget:代码绑定事件的对象
- event.currentTarget:绑定事件的对象
- event.target:真正触发事件的对象
取消冒泡事件与默认事件
取消冒泡事件
- event.stoPropagation()
- return false
取消默认事件
- event.preventDefault()
- return false;
例如可以取消a标签的默认事件
$(“a”).preventDefault()