专栏首页前端小叙事件绑定的几种常见方式

事件绑定的几种常见方式

在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发。

1.事件绑定的几种常见方式(以click事件为例)

jquery:

$(selector).click(function(){...})

$(selector).bind("click",function(){...})

$(selector).live("click",function(){...})

$(document).delegate("selector","click",function(){...})

$(selector).on("click",function(){...})

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

bind方法

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

live方法

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

delegate方法

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

$(document).delegate("selector","click",function(){...})

  约等于

$("selector").live("click",function(){...})

[注意:live事件,jQuery 1.7以后版本使用on代替live,且移动设备safari浏览器不支持live事件]

【穿插解决方案:

移动设备safari浏览器不支持live事件

方法一:

首先要给绑定click事件的元素加上样式:cursor: pointer;

然后再用live绑定事件

$('selector').live('click', function() {alert('你点我了'); })    

如果方法一对你无效,你也可以用

方法二:

同样也给绑定click事件的元素加上样式:cursor: pointer;

然后用on来绑定事件,jquery1.7后推荐用on来动态绑定事件,因为比live更高效

$(document).on('click', 'selector', function() {
            alert('你点我了');        
});    

】  

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

on方法

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

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

大量使用ajax

  将所有事件写在一个大方法里,如:

var clickEvent = function(){

$(a).bind(...);

$(b).bind(...);

}

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

  解决方案:避免这样使用

嵌套元素的事件冒泡

  解决方案:

  e.preventDefault()//阻止默认

      e.stoppropagation()//阻止冒泡

频繁使用trigger函数

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

解决方案:阻止事件冒泡,见上,

或者使用triggerhandler(慎用,不支持chrome貌似)

Javascript事件绑定的几种方式

以button的Click事件为例:

<button id="btn">click me</button>

function clickBtn() {

    alert('click!');

}

1、直接在元素上绑定回调函数 <button id="btn" onclick="clickBtn()">click me</button>

2、JS获取DOM元素对象后,对onclick属性赋值,绑定事件:        document.getElementById('btn').onclick=clickBtn;

3、JS获取DOM对象后,调用对象的addEventListener函数绑定事件:document.getElementById('btn').addEventListener('click',clickBtn);

现阶段主流浏览器兼容的绑定事件方式就这3种

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”)。将一小段跟踪代...

    蓓蕾心晴
  • 动态添加的html元素绑定事件的方法

    在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多,可以考虑使用方法二;

    蓓蕾心晴
  • 对事件委托绑定click的事件的解绑

    大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, ...

    蓓蕾心晴
  • 前端基础-jQuery事件机制

    cwl_java
  • 针对.NET开发者的NuoDB 1.1发布

    NuoDB 1.1包含ADO.NET驱动、LINQ和EF提供程序,支持64位Windows和Azure,同时还对性能做了提升。 NuoDB是一个分布式云数据库系...

    张善友
  • Mybatis 分页

    拦截StatementHandler的prepare方法 具体类PreparePaginationInterceptor 里面SQLHelper.genera...

    week
  • 360收购Opera,谁说浏览器没价值了?

    今天一则网络爆料显示,360欲收购来自挪威的著名浏览器厂商Opera,这是当年与IE、Firefox其名的三大浏览器之一。Opera虽然相对小众,但特色鲜明:小...

    罗超频道
  • 整合IMDb Top 250和BT种子下载

    许杨淼淼
  • 电脑小白自学软件编程-.Net语法基础之循环语句,纯技巧干货

    课程总目录:因头条无法自定义目录,大家关注:“做全栈攻城狮”微信公众号。回复“.net目录”,即可获取。微信公众号也包含大量学习教程,等你来~

    做全栈攻城狮
  • 超两万技术人员如何减少重复造轮子?腾讯推进内部开源协同

    ? 数万人的互联网公司如何高效运转,提升技术开发和运用效率? 截至2019年6月30日,腾讯(00700.HK)共有5.63万名员工。在去年9月30日的大规模...

    腾讯大讲堂

扫码关注云+社区

领取腾讯云代金券