addEventListener 的用法示例介绍


Posted in Javascript onMay 07, 2014

(要注意的是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);

Javascript 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 #Javascript
关闭时刷新父窗口两种方法
May 07 #Javascript
js获取下拉列表的值和元素个数示例
May 07 #Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 #Javascript
table行随鼠标移动变色示例
May 07 #Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 #Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 #Javascript
You might like
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php数据序列化测试实例详解
2017/08/12 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python k-近邻算法实例分享
2014/06/11 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python爬虫容易学吗
2020/06/02 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
小学生打架检讨书
2014/01/26 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
深入理解pytorch库的dockerfile
2022/06/10 Python