在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件。用法如下:
element.addEventListener(String type, Function listener, boolean useCaptrue);
参数说明如下:
下面示例使用 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() 方法能够为多个对象注册相同的事件处理函数,也可以为同一个对象注册多个事件处理函数。为同一个对象注册多个事件处理函数对于模块化开发非常有用。
在下面示例中,为段落文本注册两个事件: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)
参数列表如下:
在下面示例中,为段落标签 <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()内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
如果数据库有特殊字符(换行符,转义符),会导致生成的csv无法正常导入。 val1,val...
本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码,供大家参考,具...
MySQL SQL语句分类 数据查询语言DQL 负责进行查询数据不会更改数据 基础查询 查...
AJAX在使用的过程中会遇到一个问题,当用户短时间内执行了多个异步请求的时候,...
ajax发送请求到controller,controller响应一个json格式的数据给页面, JSON.pars...
现在使用Vscode编码的人越来越多,凭借着免费,开源,轻量,跨平台的特点收货了...
最近有个需求就是根据产品编号批量下架产品,需要下架日期为16-31号之间的产品,...
前言: 几乎所有的大型应用都会有自己的用于跟踪调试的API。因为一旦程序被部署...
本文转载自微信公众号「jinjunzhu」,作者jinjunzhu。转载本文请联系jinjunzhu公...
很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以...