事件绑定
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 鼠标右键
})
|
监听键盘的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
14
| $(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){
})
|
