第4章 jQuery的事件和动画——事件篇

jQuery扩展了JavaScript的基本事件处理机制，极大增强了事件处理能力

一. jQuery的事件

1. $(document).ready(function(){})加载方式

再次回到window.onload和$(document).ready(function(){})的比较中，后者是jQuery最重要的事件函数。

（1）执行时机

$(document).ready(function(){})是待DOM就绪时马上可以执行。不一位置这些元素已经完全下载完成。一个简单的例子就是：图片可能没下载完毕，但是jq就可以调用了。

另外，诸如图片未加载完毕，导致涉及图片宽高的属性无法被jq调用，可以使用load()方法。

1	`$(window).load(function(){})`

以上在用法和执行时机方面等价于window.onload。

（2）多次使用

window.onload在一个js文件中只能用一次，后面的会覆盖掉前面的。
但是$(document).ready(function(){})可以多次调用，按照顺序执行。

（3）简写

$(document).ready(function(){})的简写就是$(function(){})。

2. 事件的绑定——bind方法。

某个元素需要绑定一个事件时，需要bind方法。

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

bind方法三个参数：

第一个是事件类型（包括blur、focus、load、resize.....）——JavaScript的事件把on去掉就是jQuery的事件

第二个参数可选作为event.data。
第三个是处理函数

（1）效果

【例4.1】在一个FAQ中单击标题显示内容。

1
2
3
4
5
6
7
8 <div id="panel">
<h5 class="head">bind(type,[data],fn)意味着什么？</h5>
<div class="content">
<p><strong>type:</strong> 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。</p>
<p><strong>data:</strong>作为event.data属性值传递给事件对象的额外数据对象</p>
<p><strong>fn:</strong>绑定到每个匹配元素的事件上面的处理函数</p>
</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 *{
margin:0; padding:0;
}
#panel{
width: 600px;
border:1px solid #ccc;
margin: 50px auto;
}
h5{
line-height: 40px;
font-size: 20px;
background: rgb(123,192,244);
padding-left: 10px;
}
.content{
display: none;
padding: 10px;
}

1
2
3
4
5
6
7
8
9
10
11 $(document).ready(function(){
var bShow=false;
$('#panel h5.head').bind('click',function(){
if(bShow==false){
$('.content').show();
}else{
$('.content').hide();
}
bShow=!bShow;
})
})

（2）加强效果

上一段jq代码用了一个布尔值来实现点击显示隐藏。在jq中有自己的办法is(':visible')。同时让内容换成next()函数。

1
2
3
4
5
6
7
8
9 $(document).ready(function(){
$('#panel h5.head').bind('click',function(){
if($(this).next().is(':visible')){
$(this).next().hide();
}else{
$(this).next().show();
}
})
})

（3）改变绑定事件的类型。

例4.1中，运用的是click点击事件，同样可以换成其它。比如mouseover/mouseout。

（4）简写

前面前面章节的案例中已经用过简写，诸如xxx.bind(事件,function(){})都可以简写为

1
2
3 xxx.事件(function(){
do sth
})

唯一的区别就是代码量。

3.合成事件

hover和toggle——后者在1.8+版本不再支持。

（1）hover()方法

hover(fn1,fn2)

hover用于模拟鼠标悬停/离开的过程,悬停时触发fn1，离开时触发fn2。如果我想把例4.1的代码改写成悬停离开的形式，可以使用hover

1
2
3
4
5
6
7
8
9 $(document).ready(function(){
$('#panel h5.head').hover(
function(){
$(this).next().show();
},function(){
$(this).next().hide();
}
)
})

hover的目标不是替代mouseover和mouseout。hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。

（2）toggle()方法（已废弃，稍微了解下）

toggle(fn1,fn2,fn3....)

第一次单击触发fn1,第二次触发fn2...

4. 事件对象的属性

jq引入也event参数————它其实是一个只有事件处理函数才能访问的事件对象。函数执行完毕后，event将被销毁。

（1）event.type——可以获取事件的类型

（2）event.preventDefault()方法—阻止默认行为

jq提供了preventDefaut方法。

表单是阻止默认行为最多的地方之一。

1
2
3
4 <form id="form1" action="http://djtao.top/wordpress" method="get">
用户名：<input type="text" name="user"/>
密码：<input type="password" name="pass"/>
<input type="submit" value="提交" />

这里的代码中，点击提交按钮，就会跳转到form预定的网址。我们需要在用户名和密码为空的时候，阻止跳转。

1
2
3
4
5
6
7
8 $(function(){
$(':submit').click(function(event){
if($('#form1 :text').val()==''||$('#form1 :password').val()==''){
alert('用户名或密码不得为空！');
event.preventDefault();
}
})
})

这二者如果要同时进行，或者不影响彼此的话，可以return false。

（3）event.stopPropagation()方法———阻止事件冒泡

理解事件冒泡

简单地说就是多个有直系从属关系的对象响应同一个事件。子集发生事件后不断往父级传递。最具体的对象首先被响应。事件冒泡给实际应用带来麻烦。

阻止事件冒泡在js中运用的是cancelBubble方法。通过引入event——

1 2	`var` `oEvent=ev\|\|event;` `oEvent.cancelBubble=true;`

在jQuery中，提供了stopPropagation。

1	`event.sotpPropagation();`

（4）event.target——获取触发事件的元素

比如一个超链接中href指向一个网址。以此对象采用$('a').target得到的是这个网址。

（5）event.relatedTarget

在事件中涉及的其它任何DOM元素。
对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。

（6）event.pageX和event.pageY

获取鼠标相对于页面的x和y坐标。在js中通常是event.clientX和event.clientY。注意：如果有滚动条，还需要加上滚动条的高度。这里的event可以理解为就是光标。

（7）event.which

有三个值1,2,3，分别代表获取鼠标点击的左中右键。

（8）event.metaKey

获取键盘事件中的ctrl键。

5. 如何移除事件——unbind()方法

1	`unbind(type,[data\|fn]])`

第一个参数type表示事件类型，第二个表示要移除的函数。

如果什么参数都不写，直接移除所有的绑定事件。假设绑定的点击事件有fn1和fn2两个函数，如下：

1	`$('#btn').unbind('click',fn1);`

按钮btn在被点击时，不再执行名字为fn1的函数。fn2依然在点击时继续执行。

对于仅仅执行一次的函数，可以不用bind方法来绑定。而用one()方法。

1	`$('#btn').one('click',fn1);`

btn在被点一次之后，再怎么点都不会执行fn1了。

6.模拟操作————trigger()方法

（1）trigger()方法介绍

常见的比如当用户鼠标划过某处就加载页面时弹出第二个页面，或者按下enter执行发送信息。就调用了模拟click的方法。

1	`$('#btn').trigger('click');`

按钮btn在没被点击时（也许页面加载同时），就发生了click事件——很讨厌对吧。

(2)自定义事件

trigger()方法相当有意思。你可以自行DIY一个事件，然后用trigger()执行。

1 2	`$('#btn').bind('haha',function(){...});` `$('#btn').trigger('haha');`

（3）参数的传递

1	`<input id="btn"` `type="button"` `value="haha"` `/>`

1
2
3
4
5
6 $(function(){
$('#btn').bind('haha',function(event,a,b){
$('html').append('<p>两者之和是：'+(a+b)+'</p>')
});
$('#btn').trigger('haha',[1,1]);
})

显示结果：

这跟调用函数又好像没什么区别了。

（4）默认行为

trigger可以模拟操作。得到不一样的体验。设想一个场景，当你在web聊天室发送消息，可以通过ctrl+enter模拟点击发送按钮。

但是有个问题，比如说使用focus事件，会导致焦点移动到事件对象处——这时需要阻止。应采用

triggerHandler()方法，用法和trigger一样。

7.bind的其它用法

（1）多个事件类型绑定：

1
2
3
4
5 $(function(){
$('#btn').bind('mouseover mouseout',function(event,a,b){
$(this).toggleClass('hover')
});
})

也就是说，相同的函数，不同的事件，可以写在一起。

（2）命名空间

也就是前面说的DIY一个事件，其实可以作为命名空间。

1
2
3
4
5
6
7
8 $(function(){
$('#btn1').bind('click.haha dbclick',function(){
do something
});
$('#btn2').click(function(){
$('#btn1').unbind('.haha')
});
})

以上代码只取消了click事件（通过命名空间）但不取消dbclick事件。

（3）相同事件，不同命名空间

把上面的代码改一改；

1
2
3
4
5
6
7 $(function(){
$('#btn1').bind('click.haha',fn1)
.bind('click',fn2);
$('#btn2').click(function(){
$('#btn1').trigger('click!');
});
})