Web前端基础(17)jQuery中的事件

事件绑定

1
bind(type[, data], fn);

第一个参数是绑定的事件类型,第二个参数可选是额外数据对象,第三个参数是处理函数。

在文档装载完成后,可以使用bind()方法来对元素绑定特定的事件,可以绑定的事件有:

事件说明
blur元素失去焦点
focus元素获得焦点
load一张页面或一幅图像完成加载。
resize重置按钮被点击
scroll滚动事件
unload用户退出页面
click点击事件
dblclick双击事件
mousedown鼠标按键按下
mouseup鼠标按键抬起
mousemove鼠标被移动
mouseover鼠标移到某个元素上
mouseout鼠标从某个元素上移开
mouseenter鼠标进入某个元素
mouseleave鼠标离开某个元素
change域的内容被改变
select文本被选中
submit确认按钮被点击
keydown键盘按下
keypress某个键盘按键被按下并松开。
keyup某个键盘按键被松开
error在加载文档或图像时发生错误。

合成事件

jQuery有两个合成事件hover()和toggle(), hover()方法用于模拟鼠标悬停事件,toggle()方法用于模拟连续点击事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
$("#pannel").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});

$(function(){
$("pannel").toggle(function(){
$(this).next().show();
}, function(){
$(this).next().hide();
})
})

事件冒泡

假如在body中有个div在这个div中有个input,而且body,div,input都绑定了click事件。

当我们点击input时,三个click事件会依次向上响应,就像水泡一样。

有时候我们只需要这个input响应这个点击事件,所以就需要限制点击事件的范围。在jQuery中针对不同浏览器对象兼容问题进行了扩展和封装,使用事件对象也非常简单,最需要添加一个event参数。

1
2
3
4
5
$("element").bind("click", function(event){
//TODO some thing...

event.stopPropagation();
})

在jQuery中只需要调用stopPropagation()方法就可以停止事件冒泡。

阻止默认行为

网页中的元素有自己的默认行为,例如单击超链接会跳转,单击“提交”按钮后会提交,有的时候我们需要阻止这些默认行为。在jQuery中使用preventDefault()方法来阻止。

1
2
3
4
5
6
7
<body>
<form action="test.html">
用户名:<input type="text" id="username">
<input type="submit" id="sub" value="提交">
</form>
<div id="msg"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
<script>
$(function{
$("#sub").bind("click", function(event){
var username = $("#username").val();
if(username===""){
$("#msg").html("<p>文本框的值不能为空</p>");
event.preventDefault();
}
});
})
</script>

有一种简写方式就是事件函数return false, return false就相当于调用了event.stopPropagation();和event.preventDefault();

事件捕获

如上图所示事件捕获和事件冒泡刚好是相反的过程,遗憾的是,并非所有主流浏览器都支持事件捕获,这个缺陷无法通过JavaScript修复,所以jQuery不支持事件捕获。

事件对象的属性

event.type

该方法是获取事件的类型

1
2
3
4
$("a").click(function(event){
alert(event.type); //获取事件类型
return false; //阻止事件冒泡和默认事件
})

event.target

获取触发事件的元素

1
2
3
4
5
$("a[href='http://dp2px.com']").click(fuction(event){
var tag = event.target;
alert(tag.href);
return false;
});

event.pageX和event.pageY

该方法是获取光标相对于页面的x坐标和y坐标。

1
2
3
4
$("a").click(function(event){
alert("current mouse position : " + event.pageX + ", " + event.pageY);
return false;
})

event.which

在鼠标点击事件中获取鼠标的左、中、右键事件,在键盘事件中获取键盘按键。

1
2
3
$("a").mousedown(function(e){
alert(e.which); //1 鼠标左键 2 鼠标中键 3 鼠标右键
})

event.metaKey

监听键盘的ctrl键

移除事件

1
2
3
4
$("#delall").click(function(){
$("#btn").unbind("click");
});
//unbind()可以不传事件类型,这样就是移除所有事件

如果想移除某一个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
$("#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>")
})

$("#deltwo").click(function(){
$("#btn").unbind("click", myFun2);
})
})

另外对于只需要触发一次,随后就解绑的情况jQuery提供了一种简单写法one()方法

1
2
3
4
5
$(function(){
$("#btn").one("click", function(){

})
})

模拟操作

有的时候我们需要模拟用户的主动操作,比如模拟点击事件。在jQuery中可以使用trigger()方法来实现。

1
2
3
$("#btn").trigger("click");
//也可以简写为
$("#btn").click();

除了上面的事件外,我们可以自定义事件,来通过trigger()触发我们的自定义事件。

1
2
3
4
$("#btn").bind("myClick", function(){

})
$("#btn").trigger("myClick");

trigger()方法第一个参数是事件类型,第二个参数是一个数组用于传递参数。

1
2
3
$("#btn").bind("myClick", function(event, msg1, msg2){

})