在 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() 方法分别为每一个按钮注册事件函数,获取当前对象所显示的文本。

  

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

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

示例2

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

		

为对象注册多个事件

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

element.attachEvent(etype, eventName)

参数列表如下:

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

示例3

在下面示例中,为段落标签

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

		

为对象注册多个事件

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

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

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

JS addEventListener()和attachEvent()方法实现注册事件的更多相关文章

  1. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin......

  2. 详解JavaScript中的链式调用

    链模式链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。描述......

  3. JavaScript 防盗链的原理以及破解方法

    背景前段日子 在自学做项目的时候发现 明明在项目中引用了线上存在的图片 但是在自己的项目中却怎么也显示出来查阅资料后......

  4. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1、区别 ①动画效果的比较: toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果......

  5. 如何使用 JavaScript 操作浏览器历史记录 API

    History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息。你......

  6. JavaScript canvas实现文字时钟

    本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下 先看看效果图 代码 &l......

  7. JS removeAttribute()方法实现删除元素的某个属性

    在 JavaScript 中,使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下:re......

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

    在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件......

  9. 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 h......

  10. jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】

    本文实例讲述了jQuery+css实现的点击图片放大缩小预览功能。分享给大家供大家参考,具体如下:要求点击一张图片,......

随机推荐

  1. java读取证书公钥的实现

    方式1:使用javax.security.cert.X509Certificate进行解析URL url = Dem......

  2. 将不规则的Python多维数组拉平到一维的方法实现

    原始需求:例如有一个列表:l = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]希望把它转换成下......

  3. java中ExecutorService创建方法总结

    在对线程进行控制时,Executor虽然能够对其进行管理,但是缺少终止的功能,所以我们要用到Executor的进阶方......

  4. java中DelayQueue实例用法详解

    在阻塞队里中,除了对元素进行增加和删除外,我们可以把元素的删除做一个延迟的处理,即使用DelayQueue的方法。这......

  5. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1、区别 ①动画效果的比较: toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果......

  6. java DelayQueue的原理浅析

    在对DelayQueue延迟功能的使用上,很多人不能后完全理解延迟的一些功能使用,这里我们深入来挖掘一下DelayQ......

  7. PHP 非常实用下载远程图片

    /*** 下载远程图片* @param string $url 图片的绝对url* @param string $f......

  8. Java中Jackson快速入门

    Java生态圈中有很多处理JSON和XML格式化的类库,Jackson是其中比较著名的一个。虽然JDK自带了XML处......

  9. Python 实现进度条的六种方式

    一、普通进度条示例代码import sysimport timedef progress_bar():for i i......

  10. linux kernel操作GPIO函数

    一、头文件#include 二、注册 GPIO int gpio_request(unsigned gpio, co......