开发者社区> 半指温柔乐> 正文

第79天:jQuery事件总结(二)

简介: 上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。   一、合成事件   jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法。
+关注继续查看

       上一篇讲到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()方法。

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

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

 

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Extjs 中的添加事件总结
a、使用addListeners:        addListener( String eventName, Function fn, Object scope, Object options )         panel.
687 0
jQuery 事件
什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 ...
749 0
JQuery中事件是否发生的判断
$(document).ready(function () {     $("html").click(function (e) {         if (e.target == $("#id/.class")[0]) {             //函数体         }     }); }); target 属性规定哪个 DOM 元素触发了该事件。
601 0
jQuery Ajax应用总结
 (友情提示:本博文章欢迎转载,但请注明出处:陈新汉,http://www.blogjava.net/hankchen)  jQuery提供了简单而强大的选择器功能,同时对Ajax操作也给出了很好的支持。
739 0
移动Web触控事件总结
探讨移动web中事件的变化以及由此而来的click300ms与点透鬼点击问题
3531 0
【iOS7的一些总结】11、iOS中的事件
1、原理       在应用程序成功启动后,应用程序就开始由外部事件进行驱动。应用程序不断获取事件,并作出响应并更新用户界面,然后等待下一个事件。
820 0
jquery事件的常用方法
单击按钮 ,按钮消失 $(document).ready(function(){ $("button").click(function(){ $(this).
837 0
Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
转自:http://www.cnblogs.com/aierong/archive/2012/10/13/jqueryDataSetDataTablewebServicejsonajaxxml.html
688 0
jquery 网页局部打印总结
最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种。    最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来。
1189 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载