zoukankan      html  css  js  c++  java
  • jquery 事件,注册 与重复事件处理

    jquery有时候会出现重复注册一个事件的问题,导致点击一个事件,这个事件被重复执行,也就是触发事件的次数有几次,

    那么这个事件就会被执行叠加重复几次。

    我这边做的一个项目,在某个页面初始化的时候,给一个控件注册了一个事件,后来发现,进入几次这个页面,因为进入页面会执行一次注册,这个事件就会被注册几次,被重复执行,没有覆盖。

    上网查询了一下,总结了以下几种情况:

    1,通过 on方法注册的事件,每次的注册不会把原来的方法覆盖掉。会以队列的形式保存起来
    点击的时候,触发事情会一个个按注册的顺序执行。

    function initOnEvent(){
    //为id为onWayToEvent 按钮注册点击事件
    $("#onWayToEvent").on("click",function(){
    alert("this is one on event")
    });
    $("#onWayToEvent").on("click",function(){
    alert("this is two on event")
    });
    $("#onWayToEvent").on("click",function(){
    alert("this is three on event")
    });
    }

    2,通过bind的方法多次注册事件。通过 jquery 的bind方法多次注册的方法也是一样,不会把原来的方法覆盖了,也是把方法以
    队列的形式保存起来,触发事件后按注册次序逐个执行。

    function initBindEvent(){
    //为id为bindWayToEvent 的按钮注册点击事件
    $("#bindWayToEvent").bind("click",function(){
    alert("this is registry event by bind. one")
    });
    
    $("#bindWayToEvent").bind("click",function(){
    alert("this is registry event by bind. two")
    });
    
    $("#bindWayToEvent").bind("click",function(){
    alert("this is registry event by bind. three")
    });
    }
    </div>

    3,通过click方法多次注册事件。通过 jquery 的click方法多次注册的方法也是上面的效果一样 。

    function initClickvent(){
    $("#clickWayToEvent").click(function(){
    alert("this is registry event by click. one");
    });
    
    $("#clickWayToEvent").click(function(){
    alert("this is registry event by click. two");
    });
    $("#clickWayToEvent").click(function(){
    alert("this is registry event by click. three");
    });
    }

    4,通过live 方法多次注册事件

    要怎么样才能把前面的事件给覆盖掉,只保留最后注册的事件方法?

    1,通过unbind,bind方法进行事件的唯一注册

    $("#oneEvnetByBind").unbind("click").bind("click",function(){
    alert("only you !!!!!!!");
    });

    2,通过 die live 方法进行事件的唯一加载

    $("#oneEvnetByDieLive").die().live("click",function(){
    
    alert("the one of you !!!!!!");
    });

     3,off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

    $("button").click(function(){
    $("p").off("click");
    });
  • 相关阅读:
    剑指Offer(书):链表中环的入口节点
    剑指Offer(书):链表的倒数第K个节点
    剑指Offer(书):调整数组顺序使奇数位于偶数前面
    恒天云技术分享系列7 – 分布式块存储架构
    恒天云技术分享系列6 – vLan网络原理解析
    恒天云技术分享系列5 – 虚拟化平台性能对比(KVM & VMware)
    恒天云技术分享系列4 – OpenStack网络攻击与防御
    企业如何实现云计算价值的最大化
    恒天云技术分享系列3 – KVM性能调优
    恒天云技术分享系列2
  • 原文地址:https://www.cnblogs.com/alsf/p/6936545.html
Copyright © 2011-2022 走看看