jQuery:详解jQuery中的事件(二)

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

  接上篇jQuery:详解jQuery中的事件(一)

  3、合成事件

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

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

hover(enter, leave);

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

  上篇文章中有一个例子是这样写的:

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

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

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

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

  *这里要注意的一点是,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”事件的时候判断当前的“内容”部分是隐藏还是显示,然后进行相反的操作,显然就麻烦的多。

$(function(){
    $("#container h4.head").bind("click", function(){
       var $content = $(this).next();
    if($content.is(":visible"))
      $content.hide();
    else
      $content.show();
    }
  })

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

$(function(){
  $("#container h4.head").toggle(function(){
    $(this).next().show();
  },  function(){
    $(this).next().hide()
  })
})

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

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

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

事件对象:也就是之前介绍过的使用bind()方法,例如:

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

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

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

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

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

  5、移除事件:在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。在此就不举例说明了。

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

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

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

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

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

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

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

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

unbind([type], [data]);

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏业余草

mina的编码和解码以及断包的处理,发送自定义协议,仿qq聊天,发送xml或json

最近一段时间以来,mina很火,和移动开发一样,异常的火爆。前面写了几篇移动开发的文章,都还不错,你们的鼓励就是我最大的动力...

23120
来自专栏业余草

jQuery Mobile图片轮转轮播

最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!

20530
来自专栏业余草

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

在移动互联网时代,HTML5开发越来越收到欢迎。于是各种HTML5的框架都出来了。由于对于jquery的熟悉,jquery ...

18030
来自专栏业余草

HTML5的data-*自定义属性

HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我...

66340
来自专栏业余草

jquery顶部固定层下拉导航

最近有人在论坛里讨论怎么制作导航菜单!我关注了一下,这里就写了一个简单的demo。供大家参考。代码如下:

25430
来自专栏业余草

jQuery Mobile中jQuery.mobile.changePage方法使用详解

jQuery.mobile.changePage方法用的还是很多的。作为一个老手,有必要对jQuery mobile中实用方...

13720
来自专栏业余草

jQuery Mobile 自定义标签

最近在规划产品国际化的需求,涉及到PC Web,移动Web,和各app。设计了多个版本的移动Web均不理想。 由于移动Web采...

13040
来自专栏业余草

jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

我有一个水货的上司,大家都是知道的。所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手...

11440
来自专栏业余草

jQuery Mobile修改button的内容

jQuery Mobile修改button的内容。

16920
来自专栏业余草

使用jQuery的ajax同步请求吃过的亏

jQuery是一个很常用的js库。甚至我们开发任何一个项目都首先把jquery导入进行。jQuery太过强大,使用起来非常方便...

34130

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励