一、事件

1、载入DOM

$(document).ready() 这个第一节里具体介绍了

2、事件绑定

jQuery定义了bind()方法作为统一的接口。用来为每个匹配元素绑定事件处理程序。

其基本的语法：bind(type,[data],fn);

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

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

[html] view
plaincopy

  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. </script>
  15. </head>
  16. <body>
  17. <input type="button" value="查看联系方式" onclick="">
  18. </body>
  19. </html></span>

假设希望向事件处理函数中传递很多其它的信息时。则能够把这些信息封装在一个对象结构中。然后把这个对象作为bind()方法的第二个參数，从而实现数据外与数据内进行数据通信。

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

[html] view
plaincopy

  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
plaincopy

  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. </script>
  15. </head>
  16. <body>
  17. <input type="button" value="one绑定測试" onclick="">
  18. </body>
  19. </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
plaincopy

  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
plaincopy

  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. </script>
  20. </head>
  21. <body>
  22. <h1>三国杀变态武将</h1>
  23. <div >
  24. <ul>
  25. </ul>
  26. </div>
  27. <input type="button" value="连续点击按钮可切换事件" >
  28. </body>
  29. </html></span>

注意：在上例中引用的jquery库不是曾经经常使用的jquery-2.1.0.min.js了，是由于在jquery1.9版本号中将toggle()的切换功能去掉了,如今toggle这个功能仅仅能控制元素的显隐。

6、自己定义事件

[html] view
plaincopy

  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. $("input").click(function(){
  15. $("input").trigger("delay");
  16. })
  17. })
  18. //-->
  19. </script>
  20. </head>
  21. <body>
  22. <input type="button" value="jQuery自己定义事件" >
  23. </body>
  24. </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
plaincopy

  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内的button被点击.</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. </div>
  38. </body>
  39. </html></span>

以下几个图各自是初始页面、点击button、点击非button的div作用范围、点击div作用范围外的效果图：



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

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

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

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

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

[html] view
plaincopy

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

改完之后单击button变成如图：

B、也能够在事件处理函数运行后加上return false;来防止事件冒泡。

[html] view
plaincopy

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

8、事件委派与解除委派

live()与die()

样例：

[html] view
plaincopy

  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. $("input").click(function(){
  13. $("p").die();//不带參数就是解除live事件，假设带了參数type，那会移除对应的live事件，假设同一时候指定了第二个參数，则仅仅能移除指定事件的处理函数。
  14. })
  15. })
  16. //-->
  17. </script>
  18. </head>
  19. <body >
  20. <input type="button" value="解除事件绑定">
  21. <p>段落文本</p>
  22. </body>
  23. </html></span>

9、事件命名空间

jQuery支持事件命名空间以方便管理事件。

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

例如以下演示样例：

[html] view
plaincopy

  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. <body >
  26. <div id="" class="">
  27. jQuery命名空间
  28. </div>
  29. </body>
  30. </html></span>

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

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

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

10、绑定多个事件

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

jQuery事件整理回想的更多相关文章

  1. jquery 使用整理机制

    短路表达式 与 多重短路表达式 短路表达式这个应该人所皆知了.在 jQuery 中,大量的使用了短路表达式与多重短路表达式. 短路表达式:作为"&&"和" ...

  2. 转载 常用Jquery插件整理大全

    常用Jquery插件整理大全 做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用 ...

  3. JQuery选择器JQuery 事件

    JQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  4. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  5. jquery事件核心源码分析

    我们从绑定事件开始,一步步往下看: 以jquery.1.8.3为例,平时通过jquery绑定事件最常用的是on方法,大概分为下面3种类型: $(target).on('click',function( ...

  6. 解密jQuery事件核心 - 委托设计（二）

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  7. 解密jQuery事件核心 - 模拟事件（四）

    前几章已经把最核心的实现都分解过了,这一章我们看看jQuery是如何实现事件模拟的 在Internet Explorer 8和更低,一些事件change 和 submit本身不冒泡,但jQuery修改 ...

  8. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  9. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

随机推荐

  1. Emoji过滤

    private static boolean isNotEmojiCharacter(char codePoint) { return (codePoint == 0x0) || (codePoint ...

  2. Android互动设计-蓝牙遥控自走车iTank

    一.让Android与外部的设备互动 iTank智能型移动平台基本款简介 iTank智能型移动平台是一台履带车,车体上方的控制板有一颗微处理器,我们可以通过它的UART或是I2C接口下达指令来控制iT ...

  3. Listview模板

    每次写listview都要翻以前的代码,好烦.所以记下模板,方便下次的使用. xml文件部分代码: <ListView android:id="@+id/listview" ...

  4. PHP第二阶段学习 一、php的基本语法

    php的基本语法 输出语句:a.  echo输出:可以输出多个字符串,逗号隔开 b.  print输出:只能输出一个字符串,返回true或false c.  print_r():可以把字符串和数字简单 ...

  5. svg文件使用highmap显示

    svg文件使用highmap显示 highmap,ammap都是比较好的第三方插件用来显示svg图片:     ammap导航可能更美观点(这个highmap后面可能也会赶上),     highma ...

  6. JS监听事件错误：Uncaught TypeError: xx（函数名）is not a function at HTMLInputElement.onclick

    事件监听一直出错,提示已定义的函数名不是一个函数,折腾了好久才想到,原来是函数名和JS内部关键字重名造成的. 以前也遇到过这种情况,但因为发生的概率比较小,就没太在意,但是这次感觉这方面确实需要注意, ...

  7. centOS安装python3 以及解决 导入ssl包出错的问题

    参考: https://www.cnblogs.com/mqxs/p/9103031.html https://www.cnblogs.com/cerutodog/p/9908574.html 确认环 ...

  8. includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

    注意:对象数组不能使用includes方法来检测. JavaScript Demo: Array.includes() var array1 = [1, 2, 3]; console.log(arra ...

  9. 00.pip安装包

    pip安装更换镜像源 pip install 包名 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com pip导出和导入 ...

  10. 使用vscode，新建.vue文件，tab自动生成vue代码模板

    第一步: 新建模板并保存 文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存 第二步: 添加配置,让 ...