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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 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
PHP中的cookie
2006/11/26 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
python 实现客户端与服务端的通信
2020/12/23 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
学校三八妇女节活动情况总结
2014/03/09 职场文书
工伤赔偿协议书
2014/04/15 职场文书
先进事迹演讲稿
2014/09/01 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
国王的演讲观后感
2015/06/03 职场文书