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 相关文章推荐
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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实现微信网页授权开发教程
2016/01/19 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python实现移位加密和解密
2019/03/22 Python
Python解析多帧dicom数据详解
2020/01/13 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
综合实践活动方案
2014/02/14 职场文书
白莲教口号
2014/06/18 职场文书
主题团日活动总结
2014/06/25 职场文书
2015年市场部工作总结
2015/04/30 职场文书
导游词之青岛崂山
2019/12/27 职场文书
python办公自动化之excel的操作
2021/05/23 Python
Feign调用传输文件异常的解决
2021/06/24 Java/Android