JS addEventListener()和attachEvent()方法实现注册事件


Posted in Javascript onJanuary 11, 2021

在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件。用法如下:
element.addEventListener(String type, Function listener, boolean useCaptrue);

参数说明如下:

  • type:注册事件的类型名。事件类型与事件属性不同,事件类型名没有 on 前缀。例如,对于事件属性 onclick 来说,所对应的事件类型为 click。
  • listener:监听函数,即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个函数时,默认传递给它的唯一参数是 event 对象。
  • useCaptrue:是一个布尔值。如果为 true,则指定的事件处理函数将在事件传播的捕获阶段触发;如果为 false,则事件处理函数将在冒泡阶段触发。

示例1

下面示例使用 addEventListener() 为所有按钮注册 click 事件。首先,调用 document 的 getElementsByTagName() 方法捕获所有按钮对象;然后,使用 for 语句遍历按钮集(btn),并使用 addEventListener() 方法分别为每一个按钮注册事件函数,获取当前对象所显示的文本。

<button id="btn1" onclick="btn1();">按 钮 1</button>
<button id="btn2" onclick="btn2(event);">按 钮 2</button>
<script>
  var btn = document.getElementsByTagName("button"); //捕获所有按钮
  for(var i in btn){          //遍历按钮集合
   btn[i].addEventListener("click", function(){
    alert(this.innerHTML);
  }, true);  //为每个按钮对象注册一个事件处理函数,定义在捕获阶段进行响应
  }
</script>

在浏览器中预览,单击不同的按钮,则浏览器会自动显示按钮的名称。效果如图所示:

JS addEventListener()和attachEvent()方法实现注册事件

使用 addEventListener() 方法能够为多个对象注册相同的事件处理函数,也可以为同一个对象注册多个事件处理函数。为同一个对象注册多个事件处理函数对于模块化开发非常有用。

示例2

在下面示例中,为段落文本注册两个事件:mouseover 和 mouseout。当光标移到段落文本上面时会显示为蓝色背景,而当光标移出段落文本时会自动显示为红色背景。这样就不需要破坏文档结构为段落文本增加多个事件属性。

<p id="p1">为对象注册多个事件</p>
<script>
  var p1 = document.getElementById("p1"); //捕获段落元素的句柄
  p1.addEventListener("mouseover", function () {
    this.style.background = 'blue';
  }, true); //为段落元素注册第1个事件处理函数
  p1.addEventListener("mouseout", function () {
    this.style.background = 'blue';
  }, true); //为段落元素注册第2个事件处理函数
</script>

IE 事件模型使用 attachEvent() 方法注册事件。用法如下:

element.attachEvent(etype, eventName)

参数列表如下:

  • etype:设置事件类型,如 onclick、onkeyup、onmousemove 等。
  • eventName:设置时间名称,也就是事件处理函数。

示例3

在下面示例中,为段落标签 <p> 注册两个事件:mouseover 和 mouseout,设计当光标经过时,段落文本背景色显示为蓝色,当光标移开之后,背景色显示为红色。

<p id="p1">为对象注册多个事件</p>
<script>
  var p1 = document.getElementById("p1"); //捕获段落元素
  p1.attachEvent("onmouseover", function () {
    this.style.background = 'blue';
  }); //注册mouseover事件
  p1.attachEvent("onmouseout", function () {
    this.style.background = 'red';
  }); //注册mouseout事件
</script>

使用 attachEvent() 注册事件时,其事件处理函数的调用对象不再是当前事件对象本身,而是 window 对象,因此事件函数中的 this 就指向 window,而不是当前对象,如果要获取当前对象,应该使用 event 的 srcElement 属性。

IE 事件模型中的 attachEvent() 方法第 1 个参数为事件类型名称,需要加上 on 前缀,而使用 addEventListener() 方法时,则不需要这个 on 前缀,如 click。

到此这篇关于JS addEventListener()和attachEvent()方法实现注册事件的文章就介绍到这了,更多相关JS addEventListener()和attachEvent()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
深入理解js promise chain
May 05 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 #Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 #Javascript
vue实现防抖的实例代码
Jan 11 #Vue.js
详解uniapp的全局变量实现方式
Jan 11 #Javascript
微信小程序抽奖组件的使用步骤
Jan 11 #Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 #Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 #Javascript
You might like
PHP实现留言板功能的详细代码
2017/03/25 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
精彩自我鉴定
2014/01/16 职场文书
合伙经营协议书范本
2014/04/18 职场文书
高中班级口号
2014/06/09 职场文书
个人安全生产责任书
2014/07/28 职场文书
运动员获奖感言
2014/08/15 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers