window.addeventlistener使用方法
Posted ConfidentLiu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了window.addeventlistener使用方法相关的知识,希望对你有一定的参考价值。
http://www.jb51.net/article/49858.htm
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
(要注意的是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);
如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区
以上是关于window.addeventlistener使用方法的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Vue JS 中添加 window.addEventListener 和删除 window.removeEventListener
window.addEventListener 正在监听 window.parent.postMessage 两次
JS window.addEventListener仅适用于一页
$window.addEventListener 仅在第一次工作,但下一次在病房中无法通过 $watch 工作