addEventListener和addListener的区别

addListener是用于鼠标，键盘等特殊元素的一些监听

addEventListener是对组件监听的

(要注意的是div必须放到js前面才行)

一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如：

复制代码代码如下:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

那么将只有method3生效。

如果是Mozilla系列，用addEventListener可以让多个事件按顺序都实现，比如：

复制代码代码如下:

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

如果是ie系列，用attachEvent可以让多个事件按顺序都实现，比如：

复制代码代码如下:

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

=======================================================

Mozilla中：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target：文档节点、document、window 或 XMLHttpRequest。
type：字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

DOM2 的进化:

DOM 0 Event	DOM 2 Event
onblur()	blur
onfocus()	focus
onchange()	change
onmouseover()	mouseover
onmouseout()	mouseout
onmousemove()	mousemove
onmousedown()	mousedown
onmouseup()	mouseup
onclick()	click
ondblclick()	dblclick
onkeydown()	keydown
onkeyup()	keyup
onkeypress()	keypress
onsubmit()	submit
onload()	load
onunload()	unload

新的DOM2 用法可以addEventListener()这个函数来观察到:

复制代码代码如下:

addEventListener(event,function,capture/bubble);

参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.
capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:

复制代码代码如下:

window.attachEvent(”submit”,myFunction());

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.

如何判断是否支持哪种监听呢？如：

复制代码代码如下:

if (typeof window.addEventListener != “undefined”) {
window.addEventListener(”load”,rollover,false);
} else {
window.attachEvent(”onload”,rollover)
}

上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

removeEventListener(event,function,capture/bubble);

Windows IE的格式如下:

detachEvent(event,function);

addEventListener和addListener的区别相关推荐

attachEvent 与addEventListener到底有什么区别呢？
2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...
addEventListener和attachEvent的区别
转 addEventListener和attachEvent的区别区别如下 addEventListener共有3个参数,如下所示: element.addEventListener(type,li ...
事件绑定-addEventListener()和attachEvent()的区别及用法
JavaScript-DOM-事件绑定当我们为元素绑定一个单击事件时,通常会想到element.οnclick=function(){},但是要绑定多个单击函数时却会失效,并且会被最新的响应函数 ...
函数语法：Js之on和addEventListener的使用与不同
一.addEventListener语法 DOM标准:elem.addEventListener("事件名",函数对象,是否在捕获阶段触发) ---是否在捕获阶段触发= true/ ...
addEventListener与onclick
<ul id="test"><li>a1</li><li>a2</li><li>a3</li>& ...
前端面试题汇总（五）
BAT及各大互联网公司2014前端笔试面试题–JavaScript篇初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的 ...
【前端领域高频笔试面试】—— JavaScript高级相关
目录 1.JQuery一个对象可以同时绑定多个事件,这是如何实现的? 2.什么是webkit, 怎么用浏览器的各种工具来调试代码 3.前端templating(Mustache, underscore ...
JavaScript 习题及面试题 2
149. [问答题] 编写一个方法求一个字符串的字节长度. --------------------------------------------------------------------- ...
前端面试宝典（内容很多，也有很多重复）
文章转自:http://blog.csdn.net/liuwengai/article/details/52751565?locationNum=1&fps=1 二.JS基础 1.javasc ...

addEventListener和addListener的区别

addEventListener和addListener的区别相关推荐

最新文章

热门文章