Js添加事件addEventListener和attachEvent

最新推荐文章于 2024-03-18 03:37:54 发布
最新推荐文章于 2024-03-18 03:37:54 发布
阅读量768 收藏
点赞数
分类专栏： javascript 文章标签： javascript attachEvent addEventListener
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/widenstage/article/details/72590935
版权

给对象增加一个事件，可以用上文的方法，当然也可以用addEventListener和attachEvent。

两者有一个区别：

addEventListener和attachEvent能够给对象增加多个事件，而上文的方法只能增加一个事件。

下面说说attachEvent，据说是IE独有的方法，IE5出现，IE11废止，但是为了考虑兼容IE的一些低级版本，处理程序的时候还是需要考虑。

看程序：

<html> 
<head> 
<title>attachEvent</title> 

    <script type="text/javascript">

 	if (window.attachEvent) {

	       window.attachEvent("onload", iniEvent);

	 } else if (window.addEventListener) {

	      window.addEventListener("load", iniEvent, false);
 	}

	function iniEvent() 
	{
    	     var btn = document.getElementById("btn");
             var d1 = document.getElementById("div1");
	     if (document.all){ 
    	           btn.attachEvent("onclick", click1);   
    	           btn.attachEvent("onclick", click2);   
    		   btn.attachEvent("onclick", click3);
                   d1.attachEvent("onmouseover", over1);
                   d1.attachEvent("onmouseout", out1);
		   
             }
             else
             {  
    		   btn.addEventListener("click", click1, false);
    	           btn.addEventListener("click", click2, false); 
    	           btn.addEventListener("click", click3, false);
                   d1.addEventListener("mouseover", over1,false);
                   d1.addEventListener("mouseout", out1,false);
             }

         } 

         function click1() 
         {   
            alert('click1'); 
         }
         function click2() 
         {   
            alert('click2'); 
         } 
         function click3() 
         {   
            alert('click3');
         }

         function over1() 
         {   
            var d1 = document.getElementById("div1");
            d1.innerHTML="谢谢"
         } 
         function out1() 
         {   
            var d1 = document.getElementById("div1");
            d1.innerHTML="把鼠标移到上面"
         } 

    </script> 
</head>

<body > 

     <input type="button" id="btn" value="attachEvent" /> 
     <div id="div1" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

</body> 

</html>

例子中定义了很多事件，有onload，onclick，onmouseover，onmouseout，分别使用在window，button和div对象上。

通过程序，我们可以看出addEventListener和attachEvent的区别：

在attachEvent方法中，事件是以"on"开头的，而addEventListener，事件不是以"on"开头，另外，addEventListener还有第三个参数，一般指定false就可以。另外，两者执行的顺序也是不一样的，attachEvent是从后往前执行，addEventListener是从前往后执行。大家把代码拷贝到文件在各个浏览器执行一下就清楚了。

为了提高程序复用性，我们封装一下代码，提供一个通用函数，看代码：

<html> 
<head> 
<title>attachEvent</title> 

    <script type="text/javascript">

       addEvent(window,"load",iniEvent)

       function addEvent(element,e,fn) 
       {          
           if(element.addEventListener)
           { 
              element.addEventListener(e,fn,false); 
           }
           else
           { 
              element.attachEvent("on"+e,fn); 
           } 
        }        

	function iniEvent() 
	{
    	     var btn = document.getElementById("btn");
             var d1 = document.getElementById("div1");
             addEvent(btn,"click",click1)
	     addEvent(btn,"click",click2)
             addEvent(btn,"click",click3)
             addEvent(d1,"mouseover",over1)
             addEvent(d1,"mouseout",out1)	 

         } 

         function click1() 
         {   
            alert('click1'); 
         }
         function click2() 
         {   
            alert('click2'); 
         } 
         function click3() 
         {   
            alert('click3');
         }

         function over1() 
         {   
            var d1 = document.getElementById("div1");
            d1.innerHTML="谢谢"
         } 

         function out1() 
         {   
            var d1 = document.getElementById("div1");
            d1.innerHTML="把鼠标移到上面"
         } 

    </script> 
</head>

<body > 

     <input type="button" id="btn" value="attachEvent" /> 
     <div id="div1" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
 
</body> 

</html>
代码少了不少吧，过两年IE的低版本没人用了，就不用这么麻烦了，呵呵。

widenstage
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多种方法实现JS动态添加事件
10-26
JS动态添加事件的方法有很多，我们可以使用setAttribute、attachEvent 和 addEventListener等等，感兴趣的朋友可以参考下
学习积累：window.attachEvent和window.addEventListener的区别
DHCliaozheng的博客
03-30 605
在做多浏览器兼容的时候遇到window.attachEvent在谷歌浏览器上运行不了的问题。 经过查询资料，了解到了新的方法window.addEventListener，做个记录。 以前的JavaScript 脚本，事件都是object.event = handler;进行初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是，这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了
JS循环中给对象添加事件addEventListener的用法
无名小仙男的博客
09-06 3716
在做百度迁徙图的时候遇到： 循环中使用addEventListener方法，给各个marker对象增加点击事件， 顺便记录下百度地图的东西，整段代码都贴过来吧。。。。 // 百度地图API功能 var map = new BMap.Map(&quot;allmap&quot;, {enableMapClick: false});//构造地图时，关闭地图可点功能 map.enableScrollWheelZoom...
[JavaScript]onclick、addEventListener、attachEvent详解
最新发布
m0_60452216的博客
03-18 636
上面的这段代码只会弹出一次 ss。使用 addEventListener 添加的事件，需要使用 removeEventListener 方法来移除。不用的事件要记得移除。递归调用的方法也要记得移除，以免太多递归导致浏览器卡死。例：box.addEventListener(‘click’, function () { //不会被误删}, false);//引入切换也不会太多递归卡死}, false);
JS中事件的添加
Dear_Mr的博客
10-30 4009
在JS中，事件的添加主要有三种方式： 1. 直接在html标签上添加 <div onclick="代码段或者是函数">div</div> 这种方法也可以通过JS的obj.setAttribute("onclick", function(){........}完成2. 使用JS的DOM的方法添加 document.getElementById('div').onclick = function
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 5624
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
JavaScript-事件
qq_52822043的博客
03-24 1548
1. 注册事件（绑定事件） 给元素添加事件，成为注册事件或者绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 1）传统注册方式 利用on开头的时间onclick <button onclick = "alert('hi')" ></button> btn.onclick = function() {} 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 2）方法监听注册 W3C标准，推荐方式...
原生js事件的添加和删除的封装
01-19
在IE浏览器中添加或删除事件用attachEvent、detachEvent。在其他标准浏览器中则用addEventListener、removeEventListener。下面的对事件的添加和删除做了封装。直接看代码吧！ /** * @description 事件绑定，兼容...
JS事件添加和移出的兼容写法示例
11-25
本文实例讲述了JS事件添加和移出的兼容写法。分享给大家供大家参考，具体如下： var EventUtil = { addHandler : function (element , type, handler { if ( element.addEventListener){ element....
js添加事件的通用方法推荐
01-19
js添加事件的通用方法推荐 ... 测试添加事件：firefox使用addEventListener,ie使用attachEvent 点击此p标签，绑定了2个弹出事件 [removed] function test1() { alert(test1); } function test2(){
js添加绑定事件的方法
01-19
先介绍js添加事件通用方法，具体内容... 测试添加事件：firefox使用addEventListener,ie使用attachEvent 点击此p标签，绑定了2个弹出事件 [removed] function test1() { alert(test1); } function t
前端笔记 js关于addEventListener
doiido的专栏
10-26 2540
事件对象的类型取决于特定的事件。durationchange 事件在视频/音频（audio/video）的时长发生变化时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
JavaScript之事件高级（53rd）
山雀的博客
11-17 3841
JavaScript注册事件(绑定事件)，删除事件(解绑事件)，DOM事件流（事件传播过程），事件对象（event），事件对象阻止默认行为，阻止事件冒泡，事件委托，常见的鼠标事件、键盘事件
window.attachEvent和addEventListener
nox
08-13 716
以前写 JavaScript 脚本时，事件都是采用  object.event = handler;  的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是，这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。  但 是 Internet Explorer
addEventListener
weixin_33898233的博客
11-13 946
先看个例子： document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 1 2 3 定义和用法 addEventListener() 方法用于向指定元素添加事...
javascript的addEventListener() 方法
qq_32666545的博客
08-19 3673
...
JS addEventListener()方法
热门推荐
Dcripple的博客
05-11 2万+
addEventListener()，事件监听，用于向指定的元素添加事件监听 例： <button id="btn">点击</button> <script> document.getElementById("btn").addEventListener("click",function () { console.log(Date()); }); <
attachEvent和addEventListener详解
weixin_30865427的博客
04-14 423
attachEvent方法可以动态的为网页内的元素添加一个事件．通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用attachEvent则不必这样做．你把写好的事件准备好，在需要的时候给元素绑定上再执行．而且attachEvent支持为某个元素绑定多个事件．执行顺序是，后绑定的先执行．那么我在什么时候使用该方法呢，当然在你需要时．不过如今的Web2.0追求的是分...
js原生添加点击事件
08-21
要在JavaScript中原生添加点击事件，可以使用addEventListener()方法或者attachEvent()方法。addEventListener()方法是用于现代浏览器的，而attachEvent()方法则适用于旧版Internet Explorer浏览器。 方法一：使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值