浅谈JavaScript事件绑定的常用方法及其优缺点分析


Posted in Javascript onNovember 01, 2016

传统方式 

element.onclick = function(e){

     // ...

   };

 1.  传统绑定的优点

非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致

处理事件时,this关键字引用的是当前元素,这很有帮组

2. 传统绑定的缺点

传统方法只会在事件冒泡中运行,而非捕获和冒泡

一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数

事件对象参数(e)仅非IE浏览器可用

W3C方式 

element.addEventListener('click', function(e){

    // ...

  }, false);

1. W3C绑定的优点

该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置:false (冒泡) 或 true (捕获)。

在事件处理函数内部,this关键字引用当前元素。

事件对象总是可以通过处理函数的第一个参数(e)捕获。

可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件

2. W3C绑定的缺点

IE不支持,你必须使用IE的attachEvent函数替代。

IE方式

element.attachEvent('onclick', function(){

    // ...

  });

1. IE方式的优点

可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件。

2. IE方式的缺点

IE仅支持事件捕获的冒泡阶段

事件监听函数内的this关键字指向了window对象,而不是当前元素(IE的一个巨大缺点)

事件对象仅存在与window.event参数中

事件必须以ontype的形式命名,比如,onclick而非click

仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

Dean Edwards的方案(addEvent/removeEvent库)   

1. addEvent的优点

可以在所有浏览器中工作,就算是更古老无任何支持的浏览器

this关键字可以在所有的绑定函数中使用,指向的是当前元素

中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数

不管浏览器类型,事件对象总是作为第一个对象传入

2. addEvent的缺点

仅工作在冒泡阶段(因为它深入使用事件绑定的传统方式)

以上就是小编为大家带来的浅谈JavaScript事件绑定的常用方法及其优缺点分析全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 #Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 #Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 #Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 #Javascript
微信小程序 wxapp地图 map详解
Oct 31 #Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 #Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 #Javascript
You might like
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
vue实现五子棋游戏
2020/05/28 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
详解vue 组件注册
2020/11/20 Vue.js
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python新手学习装饰器
2020/06/04 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
上班早退检讨书
2014/01/09 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
高三自我评价
2014/02/01 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
教师见习报告范文
2014/11/03 职场文书
实习单位推荐信
2015/03/27 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
Python经常使用的一些内置函数
2022/04/11 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL