事件绑定的几种常见方式

简介:

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

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', () {alert('你点我了'

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

方法二:

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

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

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

】  

唯一的区别在于delegate的性能会比live稍好一些,因为live方法需要遍历整个dom去查selectordelegate只需要监测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事件绑定的几种方式

buttonClick事件为例:

<button id="btn">click me</button>function clickBtn() {

    alert('click!');

}

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

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

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


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




本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1903307,如需转载请自行联系原作者

相关文章
|
5月前
|
JavaScript 前端开发
js事件绑定的几种方式
js事件绑定的几种方式
116 0
|
7月前
|
Windows
事件绑定方式
事件绑定方式
|
7天前
|
JavaScript 前端开发
绑定事件的方法有几种?
绑定事件的方法有几种?
|
5月前
|
JavaScript 前端开发
js事件绑定的几种方法?
js事件绑定的几种方法?
|
4月前
|
前端开发 JavaScript UED
Vue3中的事件处理:事件绑定、事件修饰符、自定义事件
Vue3中的事件处理:事件绑定、事件修饰符、自定义事件
103 0
|
4月前
|
JavaScript
动态的dom不能绑定事件
今天又遇到这样的问题。。 简单来说创建一个li,然后点击本身删除 可是发现怎么样也无法删除 查了查才知道动态dom不能绑定事件,要通过父dom去传递
17 0
|
5月前
|
JavaScript 前端开发 API
JavaScript事件处理:探索DOM事件和事件监听器
JavaScript事件处理:探索DOM事件和事件监听器
43 0
|
8月前
|
人工智能 自然语言处理 JavaScript
$nextTick与原生js先渲染dom再执行函数的方式
$nextTick与原生js先渲染dom再执行函数的方式
109 0
|
9月前
|
前端开发
关于类组件事件绑定的 this 问题
关于类组件事件绑定的 this 问题
62 0
|
JavaScript API
js: 添加事件监听addEventListener、移除事件监听removeEventListener
js: 添加事件监听addEventListener、移除事件监听removeEventListener
91 0