• jquery事件重复绑定的几种解决方法 (二)


    防止事件重复绑定共有4种方法:

    1. bind()、unbind()方法
    2. live()、die()方法
    3. off()、on()方法
    4. one()方法

      一、bind()、unbind()方法

      bind();绑定事件

      为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

      从某种角度上讲,bind("click",function(){})与click(function(){})是等价的。

      unbind();移除通过bind()方法添加的事件

      不仅仅对于bind()方法有效,它对于click()方法同样有效。

    $("#btn1").unbind("click").bind("click",function(){
             alert("我是btn1!");
      });
     $("#btn1").unbind().click(function(){
              alert("我是btn1!");
       });

    二、live()、die()方法

      live();

      jQuery1.3增加了一个live()方法,给所有当前以及将来会匹配的元素绑定一个事件处理函数。

      支持:click,dblclick, mousedown, mouseup等。

      不支持 :blur, focus, mouseenter, mouseleave, change, submit。

      live()一次只能绑定一个事件

        jquery利用了事件的冒泡机制,直接把事件绑定在了document上,然后通过event.target找出事件的来源。

      要移除用live绑定的事件,请用die()方法

      die();

      在jquery里,使用live()来绑定事件,若想移除该事件,要使用die()方法。

     $("#btn1").die("click").live("click",function() {
            alert("我是btn1!");
      });

    三、off()、on()方法

      on();绑定事件。

      从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。

      即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。

      该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

      要删除通过on()绑定的事件,请使用off()函数。

      如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。

      off();解除绑定事件

      off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。

      off()函数主要用于解除由on()函数绑定的事件处理函数。

      on();函数和off();函数的返回值都为jQuery类型,返回当前jQuery对象本身。

     $("#btn1").off("click").on("click",function(){
            alert("我是btn1!");
      });

     四、one();方法

      绑定的事件处理函数只会执行一次。

     $("#btn1").one("click",function(){  
            alert("我只执行一次!");
      }); 
  • 相关阅读:
    npm uninstall g 和 D什么区别
    js filter 去除对象中重复元素
    vueloader 安装指定版本 与 卸载
    [六、常用控件]9UIDatePicker日期时间选择器
    [六、常用控件]13在MKMapView地图上显示提示框
    [六、常用控件]12为MKMapView指定地理坐标
    [六、常用控件]6UITextField控件的使用
    [六、常用控件]8动作表样式警告窗口的使用
    [六、常用控件]5UISwitch开关控件的使用
    [六、常用控件]2UIButton图片按钮的使用
  • 原文地址:https://www.cnblogs.com/youmingkuang/p/9317714.html
Copyright © 2020-2023  润新知