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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
node.js中express-session配置项详解
May 31 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
vue中注册自定义的全局js方法
Nov 15 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
PHP return语句的另一个作用
2014/07/30 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
Python中获取对象信息的方法
2015/04/27 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python数据存储之 h5py详解
2019/12/26 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
外贸业务员工作职责
2014/01/06 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
电台编导求职信
2014/05/06 职场文书
荒岛余生观后感
2015/06/09 职场文书