浅谈addEventListener和attachEvent的区别


Posted in Javascript onJuly 14, 2016

• addEventListener共有3个参数,如下所示:

element.addEventListener(type,listener,useCapture);

参数 参数说明
element 要绑定事件的对象,及HTML节点。
type 事件名称,注意去掉事件前边的“on”,比如“onclick”要写成“click”,“onmouseover”要写成“mouseover”。
listener 要绑定的事件监听函数,注意只写函数名,不要带括号。
userCapture 事件监听方式,只能是true和false:true,采用capture(捕获)模式;false,采用bubbling(冒泡)模式。如无特殊要求,一般是false。

这里有必要说一下捕获模式和冒泡模式的区别。

浅谈addEventListener和attachEvent的区别

如图所示,有两层div元素,而且都设定有click事件,一般来说,如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件,还会同时触发红色元素的click事件,而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false,那就会使用bubbling(冒泡)模式,他是从内而外的流程,所以会先执行蓝色元素的click事件再执行红色元素的click事件,如果是true,那就是capture(捕获)模式,和bubbling(冒泡)模式相反是由外而内,会先执行红色元素的click事件才执行蓝色元素的click事件。

如果不同层的元素使用的useCapture不同,会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling(冒泡)模式的事件。

•attachEvent共有2个参数,如下所示:

element.attachEvent(type,listener);

参数 参数说明
element 要绑定事件的对象,及HTML节点。
type 事件名称,注意加上事件前边的“on”,比如“onclick”和“onmouseover”,这是与addEventListener的区别。
listener 要绑定的事件监听函数,注意只写函数名,不要带括号。

addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。

兼容IE和非IE浏览器事件绑定的代码:

function addEvent(obj,type,handle){
  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    obj.addEventListener(type,handle,false);
  }catch(e){
    try{ // IE8.0及其以下版本
      obj.attachEvent('on' + type,handle);
    }catch(e){ // 早期浏览器
      obj['on' + type] = handle;
    }
  }
}

或者

function regEvent(ele, event_name, fun)
{
  if (window.attachEvent) 
    ele.attachEvent(event_name, fun); //IE浏览器
  else
  {
    event_name = event_name.replace(/^on/, “”);  //如果on开头,删除on,如onclick->click
    ele.addEventListener(event_name, fun, false); //非IE浏览器
  }
}

以上这篇浅谈addEventListener和attachEvent的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 #Javascript
全面了解addEventListener和on的区别
Jul 14 #Javascript
js计算系统当前日期是星期几的方法
Jul 14 #Javascript
原生javascript 学习之js变量全面了解
Jul 14 #Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 #Javascript
AngularJS实用开发技巧(推荐)
Jul 13 #Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 #Javascript
You might like
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Python httplib模块使用实例
2015/04/11 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
基于python的Paxos算法实现
2019/07/03 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
音乐教学案例
2014/01/30 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
三方合作协议书范本
2014/04/18 职场文书
保护环境建议书300字
2014/05/13 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
公司委托书格式范本
2014/09/16 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Python os和os.path模块详情
2022/04/02 Python