attachEvent,addEventListener事件绑定
兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数)。
1.绑定方法:
1 //IE attachEvent(事件名, 函数) 2 oBtn.attachEvent('onclick', aaa); 3 oBtn.attachEvent('onclick', bbb); 4 5 //FF addEventListener(事件名, 函数, 是否捕获 false) 6 oBtn.addEventListener('click', aaa, false); 7 oBtn.addEventListener('click', bbb, false);
2.例子:
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <script type="text/javascript"> 6 function aaa(){ 7 alert('a'); 8 } 9 10 function bbb(){ 11 alert('b'); 12 } 13 14 window.onload=function (){ 15 var oBtn=document.getElementById('btn1'); 16 17 /*oBtn.onclick=aaa; 18 oBtn.onclick=bbb; 覆盖掉aaa*/ 19 20 if(oBtn.attachEvent){ 21 oBtn.attachEvent('onclick', aaa); 22 oBtn.attachEvent('onclick', bbb); 23 } 24 else{ 25 oBtn.addEventListener('click', aaa, false); 26 oBtn.addEventListener('click', bbb, false); 27 } 28 }; 29 </script> 30 </head> 31 32 <body> 33 <input id="btn1" type="button" value="aaa" /> 34 </body> 35 </html>
3.如何用于写一个用于时间绑定的公共函数
例子:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function bind(obj, evname, fn) { if (obj.addEventListener) { obj.addEventListener(evname, fn, false); } else { obj.attachEvent('on' + evname, function() { fn.call(obj); }); } } function aaa(){ alert('a'); } function bbb(){ alert('b'); } window.onload=function (){ var oBtn=document.getElementById('btn1'); bind(oBtn, 'click', aaa); bind(oBtn, 'click', bbb); }; </script> </head> <body> <input id="btn1" type="button" value="aaa" /> </body> </html>
4.解除绑定(以IE为例):
1 <script type="text/javascript"> 2 window.onload=function () 3 { 4 var oBtn=document.getElementById('btn1'); 5 6 //IE attachEvent/detachEvent 7 //FF addEventListener/removeEventListener 8 var a=function (){ 9 alert('dafsdf'); 10 }; 11 12 oBtn.attachEvent('onclick', a); 13 oBtn.detachEvent('onclick', a); 14 }; 15 </script>
注意:匿名函数解除不掉绑定(因为即使两个匿名函数长的一样,但是不是同一个函数)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述