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

在 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>

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

使用 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()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

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

    在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件.用法如下: element.addEventListener(String type, Function listener, boolean useCaptrue); 参数说明如下: type:注册事件的类型名.事件类型与事件属性不同,事件类型名没有 on 前缀.例如,对于事件属性 onclick 来说,所对应的事件类型为 click. listener:监听函数,即事件处理函数

  • Jquery注册事件实现方法

    本文实例讲述了Jquery注册事件实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • 关于js注册事件的常用方法

    不解释,看代码: 复制代码 代码如下: ;(function(){    //进行库封装,防止对象污染    window['cm']={};/**    *给对象注册事件    */    var addListener=function(element,type,fn){        if(typeof element == 'undefined') return false;        if(element.addEventListener){            element.

  • ASP.NET中后台注册js脚本使用的方法对比

    用Page.ClientScript.RegisterClientScriptBlock 和Page.ClientScript.RegisterStartupScript:区别: 1.使用Page.ClientScript.RegisterClientScriptBlock c#代码 复制代码 代码如下: <%@ Page Language="C#" %> <script runat="server"> protected void Page

  • JS实现动态添加DOM节点和事件的方法示例

    本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

    本文实例讲述了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法.分享给大家供大家参考,具体如下: 最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick:这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下: <script type="text/javascript"> var cl

  • JS通用方法触发点击事件代码实例

    这篇文章主要介绍了JS通用方法触发点击事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最简单的触发单击事件肯定是elem.click(),平时在不需要考虑兼容性的场合我都是这么干的,但是毕竟这个方法有兼容性(具体兼容性如何没做过测试),所以还是要掌握一个通用的方法. 以下代码是网上比较容易找到的一段代码,我在前面加了一段MouseEvent的判断: /** * 触发单击事件 * @param elem 需要触发事件的DOM对象 */

  • 一个事半功倍的c#方法 动态注册按钮事件

    言归正传,下面就来讲讲怎样动态注册按钮事件. 首先,我们需要设置变量来获取点击一个数字按钮的值,以便在"="按钮单击事件中计算最终的结果.下面就是我开始的时候写的一段代码: 复制代码 代码如下: public double? value1 = null ;//获取运算符前的数值 public double? value2 = null ;//获取运算符前的数值 public type caltype=type .none ;//获取运算符 private void btnvalue1_

  • 多次注册事件会导致一个事件被触发多次的解决方法

    一个JavaScript逻辑,会自动绑定函数到按钮的click事件,但是这段代码会反复注册事件.这样依赖onNext函数会在点击一次按钮的时候多次触发. 这是JQuery内部没有判断是否绑定多次,怀疑其内部用了数组保存事件函数,而且没有去重. 下面的代码预防了这个问题.解决方案很简单. 复制代码 代码如下: if (!this.hasPageBarEvents) { $(".pNext").on("click", this, this.onNext); this.h

  • Javascript 注册事件浅析

    首先是最常规的方法: test function test(){ alert("test"); } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 当某一天,我们知道JavaScript要跟HTML结构实现分离后,就会改了一种写法: test function test(){ alert("test"); } window.onload = function(){ document.getElementById("para").onc

随机推荐