事件绑定的几种常见方式

在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发。为了应对所遇到的问题,上网查阅了一些资料,对事件绑定做了一些系统研究。
##1.事件绑定的几种常见方式(以click事件为例)
  $(selector).click(function(){...})
  $(selector).bind("click",function(){...})
  $(selector).live("click",function(){...})
  $(document).delegate("selector","click",function(){...})
  $(selector).on("click",function(){...})

  虽然有以上四种基本方式绑定,但无论你用哪一种,底层实现都是由on事件绑定完成,唯一的区别就是书写方便和个人习惯而已。

###1>bind方法

  会给每一个符合selector的元素添加click执行函数,即:将click事件绑定到所有设置了的selector元素上,如果动态添加了元素,之前绑定事件也起作用

###2>live方法

  将事件绑定在document上,所有事件触发冒泡到根节点document的时候,判断是否为click事件、并且是否为selector元素都符合则执行事件函数

###3>delegate方法

  原理上delegate方法和live方法很类似,都是传递选择器和执行函数两个参数到document上判断,

  $(document).delegate("selector","click",function(){...}) 约等于$("selector").live("click",function(){...})

  唯一的区别在于delegate的性能会比live稍好一些,因为live方法需要遍历整个dom去查selector而delegate只需要监测document就够了,想要更深入了解可以自己去网上查阅下,例子很多

###4>on方法

  on的绑定原理和bind差不多,但是on在性能上占优势。

##2.事件重复绑定的可能原因

###1>大量使用ajax(这个针对自己写的,你们应该不会遇到)

  本人有一个习惯把同类的东西放在一个大类,所以上次犯了个低级错误。将所有事件写在一个大方法里,如:

  var clickEvent = function(){
    $(a).bind(...);
    $(b).bind(...);
  }

  在大量使用ajax时,为了触发事件会在success里调用clickEvent方法,然后由于其他地方需要触发同样的事件又会调用clickEvent,这样很容易导致多次触发。

  解决方案:正确改正这种习惯

###2>嵌套元素的事件冒泡

  相信这个大家已经很熟悉了事件冒泡了,不再多说

  解决方案:e.preventDefault()//阻止默认 e.stoppropagation()//阻止冒泡

###3>频繁使用trigger函数

  可能有时候的需求需要触发某个特定事件,这时我们会想当然使用trigger触发事件,但是却没有考虑到带来的隐患。尤其是一个事件去trigger另一个事件

  解决方案:阻止事件冒泡,见2> 或者使用triggerhandler(慎用,不支持chrome貌似)

时间: 2024-08-13 12:58:12

事件绑定的几种常见方式的相关文章

js添加事件处理器的几种常见方式

HTML:on事件名 = strCode事件处理函数可直接访问的属性 = 全局属性 + 元素所在form中的属性 + 元素本身的属性 自动的作用域扩展方式相当于:+ 事件处理函数可以直接访问这么多属性,所以,可以这样做:1234    <form method="post">  <input type="text" name="user_name" value="">  <input type=&

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", function(e)

事件绑定的几种方式

(一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,下面的代码会弹出div的ID: [html] view plain copy <div id

jquery事件绑定的几种用法

常见的事件绑定的几种方法 主要有on(),bind(),live(),delegate(),随着版本的不断更新,live(),bind(),delegate()被相继弃用.live():1.7版本之后被弃用bind().delegate():3.0版本之后被弃用虽然在3.0之后的版本中有bind和delegate在,但在具体的实现上还是调用的on() bind: function( types, data, fn ) { return this.on( types, null, data, fn

react系列-事件绑定的几种方法对比

前言 本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined. 通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构造函数中使用bind绑定this ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class Button extends

事件绑定的第二种形式

一.过去,给一个对象绑定一个事件,来处理函数的形式,如obj.onclick=fn1,我们称之为事件绑定的第一种形式(赋值形式). 这种形式的有一种缺点就是:同一个对象的同一个事件不能同时处理两个不同的函数. 例如: function fn1(){ alert("A") } function fn2(){ alert("B") } document.onclick=fn1; document.onclick=fn2;//后面一个事件会覆盖前面一个事件 二.为了解决上

ASP.NET页面间传值的几种常见方式

(新建项目WebApplication,添加新项:源页面Default.aspx和目标页面WebForm1.aspx. 在源页面Default.aspx中添加两个TextBox, ID分别为Nametb和Emailtb,两个Label;在WebForm1.aspx中添加两个Label,ID分别为lname和lemail,用于显示TextBox传过来的值.) 1.使用QueryString 使用QueryString在页面间传递值已经是一种很老的机制了,这种方法的主要优点是实现起来非常简单,然而它

JS事件绑定和JQ的事件绑定的几种方式

JS事件绑定的方式: 1.内嵌法: <input type="button" onclick="test()" value="click me"/> 或者是多事件绑定:<input type="button" onclick="javascript:test();test1();" value="click me"/> 2.动态绑定 直接为对象赋值 documen

C# 实现AOP 的几种常见方式

AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的中统一处理业务逻辑的一种技术,比较常见的场景是:日志记录,错误捕获.性能监控等 AOP的本质是通过代理对象来间接执行真实对象,在代理类中往往会添加装饰一些额外的业务代码,比如如下代码: class RealA { public virtual string Pro { get; set; } public virtual void ShowHello(string