备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

jQuery事件整理回顾

2014-05-31 736
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一、事件 1、加载DOM $(document).ready() 这个第一节里详细介绍了 2、事件绑定 jQuery定义了bind()方法作为统一的接口，用来为每一个匹配元素绑定事件处理程序。

一、事件

1、加载DOM

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

2、事件绑定

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

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

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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> toggle() </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("input[type='button']").one("click",function(){  
  10.                 $(this).val('15210221200');  
  11.             })  
  12.         })  
  13.           
  14.   //-->  
  15.   </script>  
  16.  </head>  
  17.  <body>  
  18.     <input type="button" value="查看联系方式" onclick="">  
  19.  </body>  
  20. </html></span>  
如果希望向事件处理函数中传递更多的信息时，则可以把这些信息封装在一个对象结构中，然后把这个对象作为bind()方法的第二个参数，从而实现数据外与数据内进行数据通信。

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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> New Document </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("p").bind("click",{a:"A",b:"B"},function(event){  
  10.                 $(this).text(event.data.a+event.data.b);  
  11.             })  
  12.         })  
  13.   //-->  
  14.   </script>  
  15.  </head>  
  16.  <body>  
  17.     <p>段落1</p>  
  18.     <p>段落2</p>  
  19.     <p>段落3</p>  
  20.  </body>  
  21. </html></span>  
我们可以将绑定事件简写成 $("p").click(function(){})

使用one()绑定事件

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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> toggle() </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("input[type='button']").one("click",function(){  
  10.                 alert($(this).val());  
  11.             })  
  12.         })  
  13.           
  14.   //-->  
  15.   </script>  
  16.  </head>  
  17.  <body>  
  18.     <input type="button" value="one绑定测试" onclick="">  
  19.  </body>  
  20. </html></span>  
也就是说one()方法绑定的事件执行一次之后就注销了，但是实际开发中有些场景下某些事件需要在特定情况下注销，而不是触发一次就注销。

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

各种事件 blur() focus() mousedown() resize() change() keydown() mousemove() scroll() click() keypress() mouseout() select() dblclick() keyup() mouseover() submit() error() load() mouseup() unload()

3、注销事件

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

参数：

第一个参数是事件类型

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

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

应该不算常用吧。

4、合成事件

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

(1)、hover()方法

语法结构为 hover(enter,leave)

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

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

举个最简单的例子：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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> hover() </title>  
  5.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("span").hover(  
  10.                 function(){  
  11.                     $("span").text("光标在我身上");  
  12.                 },  
  13.                 function(){  
  14.                     $("span").text("光标跑了~~")  
  15.                 }  
  16.             )  
  17.         })  
  18.   //-->  
  19.   </script>  
  20.  </head>  
  21.  <body>  
  22.     <span >三国杀杀天下</span>  
  23.  </body>  
  24. </html></span>  
(2)、toggle()方法

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

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

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

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 在CODE上查看代码片 派生到我的代码片
  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").bind("delay",function(event){  
  10.                 setTimeout(function(){  //延迟执行  
  11.                     alert(event.type);  
  12.                 },2000)  
  13.             });  
  14.   
  15.             $("input").click(function(){  
  16.                 $("input").trigger("delay");  
  17.             })        
  18.         })    
  19.   //-->  
  20.   </script>  
  21.  </head>  
  22.   
  23.  <body>  
  24.     <input type="button" value="jQuery自定义事件" >  
  25.  </body>  
  26. </html></span>  

6、事件对象的属性

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

7、事件冒泡

(1)、什么是事件冒泡

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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作用范围外的效果图：


之所以称为冒泡，就是因为事件像气泡一样不断向上直到顶部。

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

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

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

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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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>  
改完之后单击按钮变成如图：



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

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 在CODE上查看代码片 派生到我的代码片
  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-1.8.3.js" type="text/javascript"></script>  
  6.   <script type="text/javascript">  
  7.   <!--  
  8.         $(function(){  
  9.             $("p").live("click",function(){  
  10.                 $(this).after("<p>段落文字</p>");  
  11.             })  
  12.   
  13.             $("input").click(function(){  
  14.                 $("p").die();//不带参数就是解除live事件，如果带了参数type，那会移除相应的live事件，如果同时指定了第二个参数，则只能移除指定事件的处理函数。  
  15.             })  
  16.         })  
  17.   //-->  
  18.   </script>  
  19.  </head>  
  20.   
  21.  <body >  
  22.     <input type="button" value="解除事件绑定">  
  23.     <p>段落文本</p>  
  24.  </body>  
  25. </html></span>  
9、事件命名空间

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

如下示例：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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、绑定多个事件

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

文章标签：
JavaScript
前端开发
Web App开发
关键词：
jQuery事件
挨踢人生
目录
相关文章
N..
|
1月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
11 1
穆雄雄.
|
1月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
穆雄雄.
12 0
1024小神
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
1024小神
22 1
阿甘兄
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换（原来还有这种写法）
前端基础 - JQuery事件切换（原来还有这种写法）
阿甘兄
29 0
赵广陆
|
7月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
赵广陆
56 0
爱吃豆的土豆
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery：数组遍历和事件】
Javascript知识【jQuery：数组遍历和事件】
爱吃豆的土豆
41 0
穆雄雄.
|
1月前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
穆雄雄.
10 0
穆雄雄.
|
1月前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
穆雄雄.
9 0
web前端圈
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
web前端圈
41 0
web前端圈
|
3月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用，只是写法不一样-附案例、任务
web前端圈
39 0

热门文章

最新文章

  • 1
    jquery的书写格式，简单的使用方法
  • 2
    jQuery手机号抽奖
  • 3
    jQuery方法小记
  • 4
    jQuery 选择器有几种，分别是什么
  • 5
    用JQuery实现选中select里面的option显示对应的div
  • 6
    JQuery和JS的区别有哪些？
  • 7
    jQuery 和 Zepto 的区别？ 各自的使用场景？
  • 8
    jQuery 2.0.3 源码分析 数据缓存
  • 9
    《jQuery Cookbook中文版》——1.16　获取和设置文本内容
  • 10
    jGestures: jQuery的手势事件插件
  • 1
    jQuery模态框弹窗提示代码
    18
  • 2
    使用JavaScript、jQuery和Bootstrap构建待办事项应用
    13
  • 3
    jQuery实现二级菜单
    12
  • 4
    jQuery选择器 获取元素的十一种方式
    16
  • 5
    jQuery幸运大转盘抽奖活动代码
    34
  • 6
    JQuery样式操作、click事件以及索引值-选项卡应用示例
    22
  • 7
    jquery+css实现Tab栏切换的代码实例
    21
  • 8
    jquery实现二级导航下拉菜单效果实例
    22
  • 9
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    112
  • 10
    jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
    20

    • 相关课程

    更多
  • jQuery开发教程
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • Ajax 前端开发入门与实战

    • 相关电子书

    更多
  • 现代Javascript高级教程
  • 23-Vue.js在前端...1506518547.pdf
  • JS零基础入门教程（上册）

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考