Rumah > hujung hadapan web > tutorial js > JavaScript中addEventListener的使用详解

JavaScript中addEventListener的使用详解

黄舟
Lepaskan: 2017-12-04 14:55:52
asal
4786 orang telah melayarinya

addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEvent 比较简单,二来 addEventListener 才是 DOM 中的标准内容。今天就给大家介绍下JavaScript中addEventListener的使用详解!

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

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

 代码如下:

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;
Salin selepas log masuk

那么将只有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);
Salin selepas log masuk

执行顺序为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);
Salin selepas log masuk

执行顺序为method3->method2->method1
=======================================================
Mozilla中:
addEventListener的使用方式

target.addEventListener(type,listener,useCapture);
Salin selepas log masuk

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);
Salin selepas log masuk

IE中:

target.attachEvent(type, listener);
Salin selepas log masuk

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);
Salin selepas log masuk
Salin selepas log masuk

Windows IE的格式如下:

detachEvent(event,function);
Salin selepas log masuk
Salin selepas log masuk

DOM2 的进化:

DOM 0 EventDOM 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);
Salin selepas log masuk

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

代码如下:

window.attachEvent(”submit”,myFunction());
Salin selepas log masuk

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.
如何判断是否支持哪种监听呢?如:

代码如下:

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

上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
W3C格式:

removeEventListener(event,function,capture/bubble);
Salin selepas log masuk
Salin selepas log masuk

Windows IE的格式如下:

detachEvent(event,function);
Salin selepas log masuk
Salin selepas log masuk

总结:

本文通过实例详细介绍了关于JavaScript中addEventListener的使用,相信小伙伴对此也是能够有一定的了解,希望对你的工作有所帮助!

相关推荐:

javascript DOM对象学习之事件流addEventListener()使用教程

关于addEventListener问题

详解addEventListener的三个参数之useCapture

Atas ialah kandungan terperinci JavaScript中addEventListener的使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan