JavaScript对HTML DOM使用EventListener进行操作


Posted in Javascript onOctober 21, 2015

addEventListener() 方法
实例
点用户点击按钮时触发监听事件:

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
Note 注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。

向原元素添加事件句柄
实例
当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", function(){ alert("Hello World!"); });

你可以使用函数名,来引用外部函数:
实例
当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:
实例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

你可以向同个元素添加不同类型的事件:
实例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
实例
当用户重置窗口大小时添加事件监听:

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

传递参数
当传递参数值时,使用"匿名函数"调用带参数的函数:
实例

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡或事件捕获?
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
实例
document.getElementById("myDiv").addEventListener("click", myFunction, true);

尝试一下 »

removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
实例

element.removeEventListener("mousemove", myFunction);

浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
JavaScript对HTML DOM使用EventListener进行操作
注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

实例
跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器,除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);
Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
VueJS全面解析
Nov 10 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
JavaScript对象数组的排序处理方法
Oct 21 #Javascript
Javascript刷新窗口方法小结
Oct 21 #Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 #Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 #Javascript
JavaScript函数的调用以及参数传递
Oct 21 #Javascript
Java中Timer的用法详解
Oct 21 #Javascript
JS实现的竖向折叠菜单代码
Oct 21 #Javascript
You might like
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php生成HTML文件的类方法
2019/10/11 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
Javascript学习指南
2014/12/01 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python占位符输入方式实例
2019/05/27 Python
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
建筑学推荐信
2013/11/03 职场文书
物业电工岗位职责
2013/11/20 职场文书
销售辞职报告范文
2014/01/12 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
公司奖励通知
2015/04/21 职场文书
工作感言一句话
2015/08/01 职场文书
公司保密管理制度
2015/08/04 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android