js HTML DOM EventListener功能与用法实例分析


Posted in Javascript onApril 27, 2020

本文实例讲述了js HTML DOM EventListener功能与用法。分享给大家供大家参考,具体如下:

DOM EventListener

用于向指定元素添加事件句柄。

在用户点击按钮时触发监听事件:

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

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

可以向一个元素添加多个事件句柄。

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
  alert ("Hello World!")
}
function someOtherFunction() {
  alert ("函数已执行!")
}
</script>

可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

当使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

可以使用 removeEventListener() 方法来移除事件的监听。

语法

element.addEventListener(event, function, useCapture);
  • 第一个参数是事件的类型 (如 "click" 或 "mousedown").
  • 第二个参数是事件触发后调用的函数。
  • 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。

事件冒泡或事件捕获?

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

<script>
document.getElementById("myP").addEventListener("click", function() {
  alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
  alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
  alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
  alert("你点击了 DIV2 元素 !");
}, true);
</script>

removeEventListener() 方法

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

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener()removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

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

例:该实例演示了所有浏览器兼容的解决方法

<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
  x.attachEvent("onclick", myFunction);
}
function myFunction() {
  alert("Hello World!");
}
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
layui之select的option叠加问题的解决方法
Mar 08 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
JS严格模式原理与用法实例分析
Apr 27 #Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 #Javascript
详解elementUI中input框无法输入的问题
Apr 27 #Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 #Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 #Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 #Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
YII框架http缓存操作示例
2019/04/29 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
JavaScript this关键字的深入详解
2021/01/14 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
使用K.function()调试keras操作
2020/06/17 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
中科软笔试题和面试题
2014/10/07 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
领导失职检讨书
2014/02/24 职场文书
安全教育感言
2014/03/04 职场文书
文明班级建设方案
2014/05/15 职场文书
研究生个人学年总结
2015/02/14 职场文书
公司开业主持词
2015/07/02 职场文书
同学聚会致辞集锦
2015/07/28 职场文书