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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript内存管理详细解析
Nov 11 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
简单的三步vuex入门
May 20 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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
BBS(php & mysql)完整版(五)
2006/10/09 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
php 判断数组是几维数组
2013/03/20 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
html下载本地
2006/06/19 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
Python新手们容易犯的几个错误总结
2017/04/01 Python
django初始化数据库的实例
2018/05/27 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python request 模块详细介绍
2020/11/10 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
new修饰符是起什么作用
2015/06/28 面试题
临床医学应届生求职信
2013/11/06 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
干部考核工作总结2015
2015/07/24 职场文书