浅谈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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 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分页实例代码分享
2011/07/28 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
2014年应急工作总结
2014/12/11 职场文书
办公经费申请报告
2015/05/15 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
PHP新手指南
2021/04/01 PHP
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
python中pycryto实现数据加密
2022/04/29 Python