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 相关文章推荐
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
实例详解vue中的$root和$parent
Apr 29 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python编程之string相关操作实例详解
2017/07/22 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python基于递归解决背包问题详解
2019/07/03 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
电大自我鉴定范文
2013/10/01 职场文书
自荐信不宜过于夸大
2013/11/06 职场文书
高中生自我评语大全
2014/01/19 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
同学聚会通知书
2015/04/20 职场文书
员工手册董事长致辞
2015/07/29 职场文书
高中同学会致辞
2015/08/01 职场文书
学习十八大的感悟
2015/08/11 职场文书
2015年教师节广播稿
2015/08/19 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS