addEventListener的用法示例介绍_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了addEventListener的用法示例介绍_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3495字,纯文字阅读大概需要5分钟。
内容图文
(要注意的是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的用法示例介绍_javascript技巧全部内容,希望文章能够帮你解决addEventListener的用法示例介绍_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。