javascript中addEventListener(attachEvent)详解

简介: <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; outline:0px; font-size:14px; vertical-align:baseline; orphans:4; line-height:32px; font-family:'micros

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 “click”);第二个参数表示要接收事件处理的函数;第三个参数为 useCapture。例子如下:

 <button type="button">点击</button>
<img src="11 (6).jpg" alt="" style="display:block">
<script type="text/javascript">
var obj=document.getElementsByTagName("button")[0];
function fun(){
    alert(0);
    }
function fun2(){
    alert(1);
    }
function fun3(){
    alert(2);
    }
//如果这样写,那么将会只有fun3被执行,JS没有重载(JAVA中可以根据参数的不同来做到重载,即使函数的名字一样,但是JS不行,JS可以利用argument.length和if判断来模拟重载)
obj.onclick=fun;
obj.onclick=fun2;
obj.onclick=fun3;
//3个函数都会执行,执行顺序为method1->method2->method3,但是IE8及以下不支持(用attachEvent)
if(window.addEventListener){
    obj.addEventListener("click",fun,false);  
    //关于第三个参数的作用,请看:http://chinazblz.blog.163.com/blog/static/939391732010424325598/和addEventListener2.html
    obj.addEventListener("click",fun2,false);  //第三个参数默认值为false,所以如果不写其值默认为false
    obj.addEventListener("click",fun3,false);
}
else if(window.attachEvent){
    obj.attachEvent("onclick",fun); //注意attachEvent没有第3个参数
    obj.attachEvent("onclick",fun2);  //注意这个onclick,而不是click
    obj.attachEvent("onclick",fun3);
    //执行顺序刚好相反,为method3->method2->method1,要想和FF效果一样,可以把函数反过来写,即:
    //obj.attachEvent("onclick",fun3);
    //obj.attachEvent("onclick",fun2);
    //obj.attachEvent("onclick",fun);
}
</script>

关于第三个参数的应用区别如下:

 <div id="div_test"><input id="btn_test" type="button" value="web前端开发-css119" /></div>
<script type="text/javascript">// <![CDATA[
window.onload=function(){
    document.getElementById("div_test").addEventListener("click",test1,true); //把第3个参数改为false看看效果
    document.getElementById("btn_test").addEventListener("click",test2,true); //把第3个参数改为false看看效果
    }
function test1(){
    alert("外层div触发")
    }
function test2(){
    alert("内层input触发")
    }
// ]]></script>
相关文章
|
JavaScript 前端开发
🎖️JavaScript 中 onclick 和 addEventListener 的区别
onclick是一个 HTML 属性,用于在用户单击特定元素(如按钮或链接)时执行附加的 JavaScript 代码。而 addEventListener 是 JavaScript 中的一种方法,允许开发人员动态地将事件处理程序附加到 HTML 元素上。
282 0
|
JavaScript
js:addEventListener与onclick同时使用
js:addEventListener与onclick同时使用
111 0
|
JavaScript
js: 添加事件监听addEventListener、移除事件监听removeEventListener
js: 添加事件监听addEventListener、移除事件监听removeEventListener
392 0
|
JavaScript 前端开发
js 绑定事件的几种方法 addEventListener()
看代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;添加事件的几种方法&lt;/title&gt; &lt;style type="text/css"&gt; div{ width: 200px; height: 1
2135 0
|
JavaScript 前端开发
【JavaScript】attachEvent 与addEventListener区别
attachEvent 与addEventListener到底有什么区别呢?总结如下: 一、适应的浏览器版本不同 attachEvent方法适用于IE    addEventListener方法适用于FF   二、针对的事件不同 attachEvent中的事件带on   而addEvent...
1145 0
|
27天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
23天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
144 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
85 4

热门文章

最新文章