同时为同一事件添加绑定两个属性

最新推荐文章于 2020-11-01 01:16:38 发布

weixin_30507481

最新推荐文章于 2020-11-01 01:16:38 发布

阅读量193

点赞数 1

原文链接：http://www.cnblogs.com/szqlvlll/p/10142626.html

版权

同一事件可以同时触发两个属性，如何实现呢？下面以点击事件为例，简单介绍一下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     <style>
 7         div{
 8         width:300px;
 9         height:300px;
10         background:red;
11         }
12     </style>
13     </head>
14     <body>
15         <div>给你点颜色看看</div>
16     </body>
17     <script>
18         var adiv=document.getElementsByTagName('div')[0]
19         //直接设置两个事件属性会覆盖
20         //adiv.οnclick=giveRed
21         //adiv.οnclick=giveGreen
22         function giveRed(){
23             alert("红色")
24         }
25         function giveGreen(){
26             alert("绿色")
27         }
28         
29         //事件绑定，给同一时间绑定多个事件
30         //事件对象.addEventListener('事件',函数,false)
31         //adiv.addEventListener('click',giveRed,false)
32         //adiv.addEventListener('click',giveGreen,false)
33         
34         //移除事件绑定的样式
35         //事件对象.addEventListener('事件',函数,false)
36         //adiv.removeEventListener('click',giveRed,false)
37         
38         //兼容绑定事件
39         function adda(obj,ev,func){
40             //判断一下函数是否存在，即简介判断是否是高级浏览器
41             if(obj.addEventListener){
42                 obj.addEventListener(ev,func,false)
43             }else{
44                 obj.attachEvent('on'+ev,func)
45             }
46         }
47 
48         //兼容取消绑定
49         function remove_add(obj,ev,func){
50             //判断一下函数是否存在，即简介判断是否是高级浏览器
51             if(obj.removeEventListener){
52                 obj.removeEventListener(ev,func,false)
53             }else{
54                 obj.detatachEvent('on'+ev,func)
55             }
56         }
57         
58         //调用兼容函数
59         adda(adiv,'click',giveRed)
60         adda(adiv,'click',giveGreen)
61     </script>
62 </html>