• 售前

  • 售后

热门帖子
入门百科

JS addEventListener()和attachEvent()方法实现注册变乱

[复制链接]
爱喝水的姑娘 显示全部楼层 发表于 2021-10-25 19:23:07 |阅读模式 打印 上一主题 下一主题
在 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() 方法分别为每一个按钮注册事件函数,获取当前对象所表现的文本。
  1. <button id="btn1" onclick="btn1();">按 钮 1</button>
  2. <button id="btn2" onclick="btn2(event);">按 钮 2</button>
  3. <script>
  4.   var btn = document.getElementsByTagName("button"); //捕获所有按钮
  5.   for(var i in btn){          //遍历按钮集合
  6.    btn[i].addEventListener("click", function(){
  7.     alert(this.innerHTML);
  8.   }, true);  //为每个按钮对象注册一个事件处理函数,定义在捕获阶段进行响应
  9.   }
  10. </script>
复制代码
在浏览器中预览,单击差别的按钮,则浏览器会主动表现按钮的名称。结果如图所示:

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

示例2


在下面示例中,为段落文本注册两个事件:mouseover 和 mouseout。当光标移到段落文本上面时会表现为蓝色配景,而当光标移出段落文本时会主动表现为赤色配景。如许就不需要破坏文档结构为段落文本增长多个事件属性。
  1. <p id="p1">为对象注册多个事件</p>
  2. <script>
  3.   var p1 = document.getElementById("p1"); //捕获段落元素的句柄
  4.   p1.addEventListener("mouseover", function () {
  5.     this.style.background = 'blue';
  6.   }, true); //为段落元素注册第1个事件处理函数
  7.   p1.addEventListener("mouseout", function () {
  8.     this.style.background = 'blue';
  9.   }, true); //为段落元素注册第2个事件处理函数
  10. </script>
复制代码
IE 事件模子利用 attachEvent() 方法注册事件。用法如下:
  1. element.attachEvent(etype, eventName)
复制代码
参数列表如下:
      
  • etype:设置事件范例,如 onclick、onkeyup、onmousemove 等。  
  • eventName:设置时间名称,也就是事件处理函数。
示例3


在下面示例中,为段落标签 <p> 注册两个事件:mouseover 和 mouseout,设计当光标颠末时,段落文本配景色表现为蓝色,当光标移开之后,配景色表现为赤色。
  1. <p id="p1">为对象注册多个事件</p>
  2. <script>
  3.   var p1 = document.getElementById("p1"); //捕获段落元素
  4.   p1.attachEvent("onmouseover", function () {
  5.     this.style.background = 'blue';
  6.   }); //注册mouseover事件
  7.   p1.attachEvent("onmouseout", function () {
  8.     this.style.background = 'red';
  9.   }); //注册mouseout事件
  10. </script>
复制代码
利用 attachEvent() 注册事件时,其事件处理函数的调用对象不再是当前事件对象本身,而是 window 对象,因此事件函数中的 this 就指向 window,而不是当前对象,如果要获取当前对象,应该利用 event 的 srcElement 属性。
IE 事件模子中的 attachEvent() 方法第 1 个参数为事件范例名称,需要加上 on 前缀,而利用 addEventListener() 方法时,则不需要这个 on 前缀,如 click。
到此这篇关于JS addEventListener()和attachEvent()方法实现注册事件的文章就介绍到这了,更多相关JS addEventListener()和attachEvent()内容请搜刮草根技术分享从前的文章或继承浏览下面的相关文章渴望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作