addEventListener与attachEvent
一、attachEvent和addEventListener
(一)addEventListener
addEventListener() 方法用于向指定元素添加事件句柄。使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法:element.addEventListener(event, function, useCapture)
event (必须)字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
function (必须)指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture (可选)布尔值,指定事件是否在捕获或冒泡阶段执行。【true:事件句柄在捕获阶段执行; false:默认,事件句柄在冒泡阶段执行】
可以添加许多事件,添加的事件不会覆盖已存在的事件。
示例:给button绑定两个点击事件,点击按钮时,两个事件都是执行,执行顺序为:myFunction 、someOtherFunction ,不会覆盖。(当然也可以绑定不同的事件)
var obj = document.getElementById("myBtn")
obj.addEventListener("click", myFunction);
obj.addEventListener("click", someOtherFunction);
示例:使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
// 添加 <div> 事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction); // 移除 <div> 事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
(二)attachEvent
attachEvent方法两个参数:第一个参数为事件名称,第二个参数为接收事件处理的函数;
可以添加许多事件,添加的事件不会覆盖已存在的事件。
二、attachEvent和addEventListener异同点
相同点:
都是dom对象的方法,可以实现一种事件绑定多个事件处理函数。
不同点:
1.attachEvent是IE有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。
2.多次绑定后执行的顺序是不一样的,attachEvent是后绑定先执行,addEventListener是先绑定先执行。
三、兼容性
addEventListener——兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8
attachEvent——兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener与attachEvent的更多相关文章
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- 注册事件处理程序onclick和addEventListener、attachEvent
一.设置HTML标签属性为事件处理程序(注意和下面的设置javascript对象属性为事件处理程序是不同的) 用于设置文档元素事件处理程序属性也能化成对应的HTML标签的属性.如果这样做,属性值应该是 ...
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- addEventListener 与attachEvent
第一:简单的通用方法(IE && FF) window.onload = function(){ var oDiv = document.getElementById("J_ ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
- addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
- addEventListener()、attachEvent()和removeEventListener()、detachEvent()的差别?
addEventListener()和attachEvent()的差别? addEventListener:在HTML元素上绑定事件,FF.chrome.opera.safari及IE9浏览器以上的支 ...
- addEventListener和attachEvent的区别
addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- addEventListener、attachEvent、cancelBubble兼容性随笔
一.前言 1. element.addEventListener(eventType, handler, capture); (1)参数eventType是要注册句柄的事件类型名. (2)参数hand ...
随机推荐
- Robo 3T
开源,免费的MongoDB桌面管理工具. [官方地址] https://robomongo.org/ https://studio3t.com/
- Ubuntu下Python无法识别中文
在NLP的相关任务中,应用python处理中文是很常见的.在这个过程中,由于编码方式的不一致,可能会出现以下两种错误: 1)SyntaxError: Non-ASCII character in f ...
- javaScripct入门教程
1.JavaScript环境安装 JavaScript是一个轻量级的编程语言,安装自然很简单. a.打开你的电脑,找到一个Web浏览器,再找一个文本编辑器(比如记事本) b.没有了... 2.Java ...
- 校内考试之zay与银临(day1)
T1大美江湖(洛谷P5006) zayの题解: 这个题的本质是模拟 不过有卡ceil的地方 ceil是对一个double进行向上取整,而对于int/int来说,返回值是int 举个生动的栗子 ceil ...
- 二叉树遍历(Java实现)
二叉树遍历(Java实现) 主要是二叉树的遍历,包括递归遍历和非递归遍历 import java.util.ArrayDeque; import java.util.ArrayList; impo ...
- Windows API 学习记录1
这里面的好多函数不能死记硬背,知道有这个函数就行,等用到了,再回来细看 一.窗口管理函数包括以下几类: 按钮函数(Button) Microsoft提供了对话框和控制来支持应用程序与用户之间的交互通讯 ...
- Python-S9-Day127-Scrapy爬虫框架2
01 今日内容概要 02 内容回顾:爬虫 03 内容回顾:并发和网络 04 Scrapy框架:起始请求定制 05 Scrapy框架:深度和优先级 06 Scrapy框架:内置代理 07 Scrapy框 ...
- HTML textarea 无法修改 value 的问题
当设置了 textarea 的 value 后,发现页面的输入框无法输入值, <textarea id="></textarea> 解决方法: 只需将值设置在 ...
- nginx访问控制allow、deny(ngx_http_access_module)
单看nginx模块名ngx_http_access_module,很多人一定很陌生,但是deny和allow相比没一个人不知道的,实际上deny和allow指令属于ngx_http_access_mo ...
- NSByteCountFormatter
可以将字节转化为我们需要的Kb或者m + (NSString *)stringFromByteCount:(long long)byteCount countStyle:(NSByteCountFor ...