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和DOM Interfaces来处理HTML
Oct 09 Javascript
Javascript 判断 object 的特定类转载
Feb 01 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
微信小程序实现留言板
Oct 31 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
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php解析json数据实例
2014/08/19 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
python使用多进程的实例详解
2018/09/19 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
路政管理专业推荐信
2013/11/11 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
《故乡》教学反思
2014/04/10 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
拓展策划方案
2014/06/03 职场文书
应急处置方案
2014/06/16 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL