当前位置：首页 > 编程日记 > 正文

第79天：jQuery事件总结（二）

编程日记 2024-11-07 07:30:00

上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

一、合成事件

jQuery有两个合成事件——hover()方法和toggle()方法，同ready()方法一样，这些都是jQuery自定义的方法。

　　hover()方法：hover()方法的语法结构为：

hover(enter, leave);

hover()方法用于模拟鼠标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数（enter）；当鼠标移出这个元素时，会触发指定的第二个函数（leave）。

　　上篇中有一个例子是这样写的：

1 $(function(){
2     $("#container h4.head").bind("mouseover", function(){
3       $(this).next().show();    //获取并显示“内容”元素
4     }).bind("mouseout", function(){
5       $(this).next().hide();
6     });
7   })

可以将这个例子改写成以下的jQuery代码：

1 $(function(){
2     $("#container h4.head").hover(function(){
3       $(this).next().show();    //获取并显示“内容”元素
4     }, function(){
5       $(this).next().hide();
6     });
7   })

上述两种写法的代码的运行效果是一致的。

　　*这里要注意的一点是，jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")，那么这两对绑定函数，其实是两对事件是什么区别呢？解析如下：

　　mouseover与mouseenter

　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
　　只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

　　mouseout与mouseleave
　　不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
　　只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

　　简单的说，mouseover和mouseout会引起触发的区域更大，mouseenter和mouseleave只能针对绑定的元素来触发。

　　toggle()方法：toggle()方法的语法结构为：

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

　　toggle()方法用于模拟鼠标连续单击事件。每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

　　上篇有过下面的一个例子，在其中如果要连续单击“标题”链接，实现“内容”隐藏和显示的效果，那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示，然后进行相反的操作，显然就麻烦的多。

1 $(function(){
2     $("#container h4.head").bind("click", function(){
3        var $content = $(this).next();
4 　　　　if($content.is(":visible"))
5 　　　　　　$content.hide();
6 　　　　else
7 　　　　　　$content.show();
8     }
9   })

但是这种方式显然麻烦的多，不是最合适的。再看这个需求，刚好就很适合使用toggle()方法。使用toggle()方法改写上面的例子如下：

1 $(function(){
2   $("#container h4.head").toggle(function(){
3     $(this).next().show();
4   },  function(){
5     $(this).next().hide()
6   })
7 })

2、事件冒泡：

在页面上可以有多个事件，也可以多个元素相应同一个事件，就像上面介绍的那两对事件一样。再比如，假设网页上有两个元素，一个元素A嵌套在另一个元素B中，并且都被绑定了click事件，同时body元素上也绑定了click事件。那么在单击子元素A的时候，会依次触发三个click事件；单击元素B的时候，会依次触发两个click事件。

　　就上面的简单描述，已经可以看出问题所在了，那就是会出现意想不到的click事件，所以需要对事件作用范围进行限制。

　　jQuery有三种办法可以解决事件冒泡导致的问题。

　　1、事件对象：也就是之前介绍过的使用bind()方法，例如：

$("element").bind("click", function(event){  //event:事件对象//code...
})

上面代码中，当单击element元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

　　2、停止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。

$("element").bind("click", function(event){  //event:事件对象//code...
　//code...
  event.stopPropagation();    //停止事件冒泡
})

阻止默认行为：与上面的stopPropagation()方法相似，jQuery也提供了preventDefault()方法来阻止元素的默认行为。

三、移除事件：

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

　　所以，移除事件就涉及两种情况下的移出，一种是移除之前注册的所有事件，二是移除其中的一个事件。以一个按钮为例：假设网页中有一个id为btn的按钮，其上绑定了几个click事件。那么：

　　首先添加一个移除事件的按钮：

<button id="delAll">移除所有事件</button>

然后可以为该按钮绑定若干的click事件，使用链式操作就可以很简单的为其绑定几个click事件。

　　最后就是编写用于移除所有click事件的处理函数了。jQuery代码如下：

$("#delAll").click(function(){$('#btn').unbind("click");
})

因为元素绑定的都是click事件，所以上面不写“click”参数也可以达到相同的效果。

　　因此可以看出unbind()方法的语法结构：

unbind([type], [data]);

　其中，第一个参数是事件类型，第二个参数是将要移除的函数。显然移除元素上的所有事件是使用没有第二个参数的unbind()方法。

　　如果没有第一个参数，则移除所有绑定的事件；否则只删除该类型的事件。

　　如果传入了第二个参数，则只有这个特定的事件处理函数会被删除。这正是移除元素的某一个事件的方法。

外面的世界那么浮躁，我只想要一块键盘，安静下来，奏出精彩的代码篇章。

https://www.dkcj.cn/info/26430.html

第79天：jQuery事件总结（二）

一、合成事件

2、事件冒泡：

三、移除事件：

相关文章：

asp.net利用RAR实现文件压缩解压缩【月儿原创】

缺少HTML Doctype造成的样式问题

快收藏！整理了 100 个 Python 小技巧

--single-transaction 参数对应MyISAM引擎和InnoDB引擎

C#优化字符串操作【月儿原创】

构筑超异构计算时代，英特尔 AI 全布局

[软件推荐]电子日记本EDiary，记下您的每一天

C#的6种常用集合类大比拼【月儿原创】

“35岁才是一个程序员成熟的开始！”

centos安装easy_instal

如何用xmanager远程连接centos6.0的桌面

ASP.NET 3.5 企业级开发

DEV报表之条形码

Copilot 真会砸了程序员的饭碗？

提升城镇化质量有利于激活智慧城市潜能

变量的属性（全局变量、局部变量、动态变量、静态变量等）

Science论文：诺奖经济学家的经典决策模型，被AI挑战

Canny算法源码，欢迎交流

Provisioning Services 7.8 入门系列教程之十三使用 Boot Device Management(BDM)

Memcached深度分析

【分享】 IT囧事

为什么掌握Linux对程序员这么重要……

Java并发编程有多难？这几个核心技术你掌握了吗？

这届 AI 预测欧洲杯冠军，通通被打脸

资源的正确引用

给网站管理员的建议：创建可利用的、可抓取的网站

iptables如何开放被动模式的FTP服务

KNN 分类算法原理代码解析

Roadsend PHP-开源的PHP代码编译器

Android安卓开发中图片缩放讲解