jQuery整理笔记五----jQuery事件

Bertha 。 2022-08-27 10:54 203阅读 0赞

一、事件

1、加载DOM

$(document).ready() 这个第一节里详细介绍了

2、事件绑定

jQuery定义了bind()方法作为统一的接口，用来为每一个匹配元素绑定事件处理程序。其基本语法：bind(type,\[data\],fn);

其中参数type表示事件类型，参数data是可选参数,它可以作为event.data属性值传递给事件对象的额外数据对象。参数fn表示事件处理函数。

例如下例中为p元素绑定单击事件，当点击不同段落文本的时候会提示不同段落文本的内容：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

如果希望向事件处理函数中传递更多的信息时，则可以把这些信息封装在一个对象结构中，然后把这个对象作为bind()方法的第二个参数，从而实现数据外与数据内进行数据通信。

例如在上面的示例基础上向其传递两个值A和B：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

我们可以将绑定事件简写成 $("p").click(function()\{\})

使用one()绑定事件

one() 是bind()的一个特例，由它绑定的事件在执行一次响应之后就失效。看个例子吧：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

也就是说one()方法绑定的事件执行一次之后就注销了，但是实际开发中有些场景下某些事件需要在特定情况下注销，而不是触发一次就注销。

对此，jQuery定义了专门注销事件的方法

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 各种事件 
 <tbody> 
 <tr> 
 <td>blur()</td> 
 <td>focus()</td> 
 <td>mousedown()</td> 
 <td>resize()</td> 
 </tr> 
 <tr> 
 <td>change()</td> 
 <td>keydown()</td> 
 <td>mousemove()</td> 
 <td>scroll()</td> 
 </tr> 
 <tr> 
 <td>click()</td> 
 <td>keypress()</td> 
 <td>mouseout()</td> 
 <td>select()</td> 
 </tr> 
 <tr> 
 <td>dblclick()</td> 
 <td>keyup()</td> 
 <td>mouseover()</td> 
 <td>submit()</td> 
 </tr> 
 <tr> 
 <td>error()</td> 
 <td>load()</td> 
 <td>mouseup()</td> 
 <td>unload()</td> 
 </tr> 
 </tbody> 
</table>

3、注销事件

unbind()，该方法与bind()是对应的，能够从一个匹配元素中删除所有绑定的事件或者是删除指定的绑定事件。如果没有指定参数，那就删除所有。

参数：

第一个参数是事件类型

第二个参数是要移除的函数

如果没有参数，则删除所有绑定的事件，如果提供了事件类型作为参数，那么只删除该类型的绑定事件

应该不算常用吧。

4、合成事件

jQuery有两个合成事件----hover()和toggle(),这两个方法都是jQuery自定义的方法

(1)、hover()方法

语法结构为 hover(enter,leave)

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，离开时触发第二个函数。

这个函数很好理解，而且实际开发中会有很多妙用。

举个最简单的例子：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

(2)、toggle()方法

语法结构 toggle(fn1,fn2,fn3...fnN)

toggle()方法用于模拟鼠标连续单击事件，第一次单击事件触发指定的第一个函数，第二次就触发第二个函数.... 如果有更多的函数则依次触发，直到最后一个。随后的每次单击都是对这几个函数的轮番调用。

看到这个方法第一想到的是toggleClass() 用于给元素对象切换样式。

toggle方法也是挺好理解的，以前项目中倒是没有应用过。举个例子：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2. **<****html****>**  
3.  **<****head****>**  
4.   **<****title****>** unbind() **</****title****>**  
5.   **<****script**  src="jquery-1.8.3.js" type="text/javascript"**>****</****script****>**  
6.   **<****script** type="text/javascript"**>**  
7.   <!--  
8.         $(function()\{  
9.             $("input").toggle(  
10.                 function()\{$("ul").append($("**<****li****>****<****h2****>**左  慈**</****h2****>****</****li****>**"))\},  
11.                 function()\{$("ul").append($("**<****li****>****<****h2****>**曹  冲**</****h2****>****</****li****>**"))\},  
12.                 function()\{$("ul").append($("**<****li****>****<****h2****>**神周瑜**</****h2****>****</****li****>**"))\},  
13.                 function()\{$("ul").append($("**<****li****>****<****h2****>**神曹操**</****h2****>****</****li****>**"))\},  
14.                 function()\{$("ul").append($("**<****li****>****<****h2****>**孙尚香**</****h2****>****</****li****>**"))\},  
15.                 function()\{$("ul").append($("**<****li****>****<****h2****>**神关羽**</****h2****>****</****li****>**"));$(this).unbind()\}  
16.             )  
17.       
18.         \})        
19.   //--**>**  
20.   **</****script****>**  
21.  **</****head****>**  
22.  **<****body****>**  
23.     **<****h1****>**三国杀变态武将**</****h1****>**  
24.     **<****div** **>**  
25.         **<****ul****>**  
26.               
27.         **</****ul****>**  
28.     **</****div****>**  
29.   
30.     **<****input** type="button" value="连续点击按钮可切换事件" **>**  
31.  **</****body****>**  
32. **</****html****>****</****span****>**

注意：在上例中引用的jquery库不是以前常用的jquery-2.1.0.min.js了，是因为在jquery1.9版本中将toggle()的切换功能去掉了,现在toggle这个功能只能控制元素的显隐。

6、自定义事件

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

6、事件对象的属性

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 jQuery的Event对象的属性和方法 
 <tbody> 
 <tr> 
 <th>属性/方法</th> 
 <th>说 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;明</th> 
 </tr> 
 </tbody> 
 <tbody> 
 <tr> 
 <td>type</td> 
 <td>获取事件的类型，如click、mouseover等，返回值为事件类型的名称。</td> 
 </tr> 
 <tr> 
 <td>target</td> 
 <td>发生事件的节点。一般利用该属性来获取当前被激活事件的具体对象。</td> 
 </tr> 
 <tr> 
 <td>relatedTarget </td> 
 <td>引用与事件的目标节点相关的节点。对于mouseover事件来说，他是鼠标指针移到某目标上时所离开的那个节点；对于mouseout来说就是离开目标时鼠标指针要进入到的那个目标</td> 
 </tr> 
 <tr> 
 <td>altKey</td> 
 <td>表示在声明鼠标事件的时候是否按下了【alt】键。如果返回值为true，则表示按下</td> 
 </tr> 
 <tr> 
 <td>ctrlKey</td> 
 <td>表示在声明鼠标事件的时候是否按下了【ctrl】键。如果返回值为true，则表示按下 </td> 
 </tr> 
 <tr> 
 <td>shiftKey</td> 
 <td>表示在声明鼠标事件的时候是否按下了【shift】键。如果返回值为true，则表示按下 </td> 
 </tr> 
 <tr> 
 <td>metaKey</td> 
 <td>表示在声明鼠标事件的时候是否按下了【meta】键。如果返回值为true，则表示按下 </td> 
 </tr> 
 <tr> 
 <td>which</td> 
 <td>当在声明mousedown、mouseup时，显示鼠标键的状态值，也就是说哪个鼠标键改变了它的状态，返回值为1，表示按下左键，返回值为2，表示按下中键，返回值为3，表示按下右键</td> 
 </tr> 
 <tr> 
 <td>which</td> 
 <td>当在声明keydown和keypress事件时，显示触发事件的键盘键的数字编码</td> 
 </tr> 
 <tr> 
 <td>pageX</td> 
 <td>对于鼠标事件来说,指定鼠标指针相对于页面原点的水平坐标</td> 
 </tr> 
 <tr> 
 <td>pageY</td> 
 <td>对于鼠标事件来说,指定鼠标指针相对于页面原点的垂直坐标 </td> 
 </tr> 
 <tr> 
 <td>screenX</td> 
 <td>对于鼠标事件来说,指定鼠标指针相对于屏幕原点的水平坐标 </td> 
 </tr> 
 <tr> 
 <td>screenY </td> 
 <td>对于鼠标事件来说,指定鼠标指针相对于屏幕原点的垂直坐标 </td> 
 </tr> 
 <tr> 
 <td>data</td> 
 <td>存储事件处理函数第二个参数所传递的额外数据</td> 
 </tr> 
 <tr> 
 <td>preventDefault()</td> 
 <td>取消可能引起任何语义操作的事件，如元素特定事件类型的默认操作，例如取消submit默认的表单提交操作</td> 
 </tr> 
 <tr> 
 <td>stopPropagation()</td> 
 <td>防止事件沿着DOM树向上传播，可以防止事件冒泡的发生</td> 
 </tr> 
 </tbody> 
</table>

7、事件冒泡

(1)、什么是事件冒泡

假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都绑定了click事件。同事body元素也绑定了click事件。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2. **<****html****>**  
3.  **<****head****>**  
4.   **<****title****>** 事件冒泡 **</****title****>**  
5.   **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.   **<****script** type="text/javascript"**>**  
7.   <!--  
8.         $(function()\{  
9.             //为input元素绑定click事件  
10.             $('input').click(function()\{  
11.                 var txt=$('\#msg').html()+"**<****p****>**div内的按钮被点击.**</****p****>**";  
12.                 $('\#msg').html(txt);  
13.             \})  
14.             //为第一个div绑定click事件  
15.             $('div').eq(0).click(function()\{  
16.                 var txt=$('\#msg').html()+"**<****p****>**div作用范围发生点击.**</****p****>**";  
17.                 $('\#msg').html(txt);  
18.             \})  
19.             //为body元素绑定click事件  
20.             $('body').click(function()\{  
21.                 var txt=$('\#msg').html()+"**<****p****>**body元素被单击.**</****p****>**";  
22.                 $('\#msg').html(txt);  
23.             \})  
24.         \})  
25.   //--**>**  
26.   **</****script****>**  
27.  **</****head****>**  
28.  **<****body** **>**  
29.     **<****h3****>**div作用范围外**</****h3****>**  
30.     **<****div** id="" class=""**>**  
31.         **<****h3****>**div作用范围内**</****h3****>**  
32.         **<****input** type="button" value="div内的一个按钮" onclick=""**>**  
33.         **<****h3****>**div作用范围内**</****h3****>**  
34.     **</****div****>**  
35.     **<****h3****>**div作用范围外**</****h3****>**  
36.     **<****div** id="msg" class=""**>**  
37.           
38.     **</****div****>**  
39.  **</****body****>**  
40. **</****html****>****</****span****>**

下面几个图分别是初始页面、点击按钮、点击非按钮的div作用范围、点击div作用范围外的效果图：

![SouthEast][]![SouthEast 1][]![SouthEast 2][]![SouthEast 3][]  
之所以称为冒泡，就是因为事件像气泡一样不断向上直到顶部。

(2)、事件冒泡引发的问题：

就像上面那个例子，我们单击了div内按钮，只想触发按钮的单击事件，但是实际结果在我们的预料之外，所以我们必须限定事件的作用范围。

为了解决这个问题，有两个个办法：

A、通过事件对象(event)的stopPropagation()方法

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**   //为input元素绑定click事件  
2.     $('input').click(function(event)\{  
3.         var txt=$('\#msg').html()+"**<****p****>**div内的按钮被点击.**</****p****>**";  
4.         $('\#msg').html(txt);  
5.         event.stopPropagation();//停止事件冒泡  
6.     \})**</****span****>**

改完之后单击按钮变成如图：

![SouthEast 4][]

B、也可以在事件处理函数执行后加上return false;来防止事件冒泡。

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**   //为input元素绑定click事件  
2.     $('input').click(function()\{  
3.         var txt=$('\#msg').html()+"**<****p****>**div内的按钮被点击.**</****p****>**";  
4.         $('\#msg').html(txt);  
5.         return false;  
6.     \})**</****span****>**

8、事件委派与解除委派

live()与die()

例子：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

9、事件命名空间

jQuery支持事件命名空间以方便管理事件。例如，在下面示例中为div元素绑定多个事件类型，然后使用命名空间进行规范，从而方便管理。所谓事件命名空间，就是在事件类型后面以点语法附加一个别名，以便于引用事件，如，click.a ，其中a就是click当前事件的别名。

如下示例：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **<****span** style="font-family:SimSun;font-size:12px;"**>**<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2. **<****html****>**  
3.  **<****head****>**  
4.   **<****title****>** jQuery命名空间 **</****title****>**  
5.   **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
6.   **<****script** type="text/javascript"**>**  
7.   <!--  
8.         $(function()\{  
9.             $("div").bind("click.a",function()\{  
10.                 $("body").append("**<****p****>**click事件**<****p****/>**")  
11.             \});  
12.             $("div").bind("dblclick.a",function()\{  
13.                 $("body").append("**<****p****>**dblclick事件**<****p****/>**")  
14.             \});  
15.             $("div").bind("mouseover.a",function()\{  
16.                 $("body").append("**<****p****>**mouseover**<****p****/>**")  
17.             \});  
18.             $("div").bind("mouseout.a",function()\{  
19.                 $("body").append("**<****p****>**mouseout**<****p****/>**")  
20.             \});  
21.         \})  
22.   //--**>**  
23.   **</****script****>**  
24.  **</****head****>**  
25.   
26.  **<****body** **>**  
27.     **<****div** id="" class=""**>**  
28.         jQuery命名空间  
29.     **</****div****>**  
30.  **</****body****>**  
31. **</****html****>****</****span****>**

我们为div绑定的几个事件都指定了命名空间，这样在删除事件的时候，就可以直接指定命名空间即可。例如调用下面一行代码就可以把上面绑定的事件全部删除：

$("div").unbind(".a");

同样，假如我们为click事件类型指定了不同的命名空间，那么当我们只想删一个的时候只要指定它的命名空间即可。

10、绑定多个事件

我们可以为同一元素绑定多个事件，既可以是同类型的也可以是不同类型的。

[view plain]: http://blog.csdn.net/caohaicheng/article/details/24471693#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/312936
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/312936/fork
[SouthEast]: https://img-blog.csdn.net/20140425145843062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20140425145856812?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20140425145909562?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: /images/20220824/6a08efcabbb14420b40ea8a65f5be9e0.png
[SouthEast 4]: /images/20220824/f630e93973ca4034a525250c500c8fc5.png