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 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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 strtotime函数详解
2009/12/18 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
smarty中常用方法实例总结
2015/08/07 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
python如何进行矩阵运算
2020/06/05 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
团购业务员岗位职责
2014/03/15 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL