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 相关文章推荐
JavaScript 全角转半角部分
Oct 28 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
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
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
详解Python:面向对象编程
2019/04/10 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
电子商务专业毕业生求职信
2014/06/12 职场文书
借名购房协议书范本
2014/10/06 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
药房管理制度范本
2015/08/06 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python