• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(四):jquery事件绑定和事件委托

    JQuery学习记录(四):jquery事件绑定和事件委托

    作者: 分类:JS应用 点击: 65 次
    wordpress CMS主题:ssmay主题

      我们javascript有许多的事件,通过这些事件,我们可以对页面进行一些不一样的特效,这也是js的魅力之所在。而通过jquery来操作事件,比javascript更加简单直接。下面一起来看看jquery的事件绑定和事件委托。

      jQuery1.7 以前 绑定事件: bind()//可以连缀,不能动态绑定事件
      jQuery1.7 以前 解绑事件: unbind()

      jQuery1.43 以前 事件委托: live()//不能连缀,可动态绑定事件
      jQuery1.43 以前 解绑委托: die()

      jQuery1.7 以前 事件委托: delegate()//可以连缀,可动态绑定事件
      jQuery1.7 以前 解绑委托: undelegate()

      jQuery1.7 以后 绑定与委托: on()//可以连缀,可动态绑定事件
      jQuery1.7 以后 解绑: off()

      替代.bind()方式

      $('.button').on('click', function () {
      alert('替代.bind()');
      });

      替代.bind()方式,并使用额外数据和事件对象

      $('.button').on('click', {user : 'Lee'}, function (e) {
      alert('替代.bind()' + e.data.user);
      });

      替代.bind()方式,并绑定多个事件

      $('.button').on('mouseover mouseout', function () {
      alert('替代.bind()移入移出!');
      });

      替代.bind()方式,以对象模式绑定多个事件

      $('.button').on({
      mouseover : function () {
      alert('替代.bind()移入!');
      },
      mouseout : function () {
      alert('替代.bind()移出!');
      }
      });

      替代.bind()方式,阻止默认行为并取消冒泡

      $('form').on('submit', function () {
      return false;
      });

      $('form').on('submit', false);

      替代.bind()方式,阻止默认行为

      $('form').on('submit', function (e) {
      e.preventDefault();
      });

      替代.bind()方式,取消冒泡

      $('form').on('submit', function (e) {
      e.stopPropagation();
      });

      替代.unbind()方式,移除事件

      $('.button').off('click');
      $('.button').off('click', fn);
      $('.button').off('click.abc');

      替代.live()和.delegate(),事件委托

      $('#box').on('click', '.button', function () {
      $(this).clone().appendTo('#box');
      });

      替代.die()和.undelegate(),取消事件委托

      $('#box').off('click', '.button');

      不管是.bind()还是.on(),绑定事件后都不是自动移除事件的,需要通过.unbind()和.off()
      来手工移除。jQuery 提供了.one()方法,绑定元素执行完毕后自动移除事件,可以方法仅触
      发一次的事件。

      类似于.bind()只触发一次

      $('.button').one('click', function () {
      alert('one 仅触发一次!');
      });

      类似于.delegate()只触发一次

      $('#box).one('click', 'click', function () {
      alert('one 仅触发一次!');
      });

      ==================================================

      点击按钮就重新生成一个按钮并动态绑定原按钮的事件行为。

      //HTML 部分
      <div style="background:red;width:200px;height:200px;" id="box">
      <input type="button" value="按钮" class="button" />
      </div>

      //使用.bind()不具备动态绑定功能,只有点击原始按钮才能生成

      $('.button').bind('click', function () {
      $(this).clone().appendTo('#box');
      });

      //使用.live()具备动态绑定功能,

      $('.button').live('click', function () {
      $(this).clone().appendTo('#box');
      });

      由于.live()和.die()在 jQuery1.4.3 版本中废弃了, 之后推出语义清晰、 减少冒泡传播层次、又支持链接连缀调用方式的方法: .delegate()和.undelegate()。 但这个方法在 jQuery1.7 版本中被.on()方法整合替代了。

      $('#box').delegate('.button', 'click', function () {
      $(this).clone().appendTo('#box');
      });
      $('#box').undelegate('.button','click');

      注意:.delegate()需要指定父元素,然后第一个参数是当前元素,第二个参数是事件方式, 第三个参数是执行函数。 和.bind()方法一样, 可以传递额外参数。

      .undelegate()和.unbind()方法一样可以直接删除所有事件,比如:.undelegate('click')。也可以删除命名空间的事件,
      比如:.undelegate('click.abc')。

      注意:.live()和.delegate()和.bind()方法一样都是事件绑定,那么区别也很明显,用途上遵循两个规则:

      1.在 DOM 中很多元素绑定相同事件时;
      2.在 DOM中尚不存在即将生成的元素绑定事件时;我们推荐使用事件委托的绑定方式,否则推荐使用.bind()的普通绑定。

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201807316380.html
    本文时间:2018-07-31 06:44:48
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“JQuery学习记录(四):jquery事件绑定和事件委托”

    1. ajianmeige说道:

      为什么没有评论,我来占个沙发。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.