JS脚本动态给元素/控件添加事件
最近突然要用到JS脚本动态给元素添加事件。如TextBox的onclick事件。但有的onclick事件原先已经定义了相应代码！
这里又不能替代原有方法，而JS脚本里面有个方法可以给控件在原有事件的基础上进行添加！同时又查了一下如何去掉之前的预定义的事件；
<html> <script language="javascript"> function set() { var obj = document.getElementById("fy"); //obj.attachEvent('onfocus', add); //在原先事件上添加 //obj.setAttribute('onfocus',add); //会替代原有事件方法 //obj.onfocus=add; //等效obj.setAttribute('onfocus',add); if(window.addEventListener) { //其它浏览器的事件代码: Mozilla, Netscape, Firefox //添加的事件的顺序即执行顺序 //注意用 addEventListener 添加带on的事件，不用加on obj.addEventListener('focus', add, false); } else { //IE 的事件代码 在原先事件上添加 add 方法 obj.attachEvent('onfocus',add); } } function add(){alert("已经成功添加事件");} </script> <body> <input type="text" onfocus="alert('预设事件');" id="fy" /> <input type="button" onclick="set();" value="sssss"/> </body> </html>
//自定义一个函数，可以直接使用
var oBtn = document.getElementById('btn1'); if (oBtn.attachEvent) { //IE 中 oBtn.attachEvent('onclick',function () { alert('a') }; oBtn.attachEvent('onclick',function () { alert('baa') }; }else { //firefox googleChorme oBtn.addEventListener('click', function () { alert('a') }, false); oBtn.addEventListener('click', function () { alert('b') }, false); } //为了代码好看一点，写一个代码封装判断兼容性 function myAddEvent(obj, ev, fn) { if (obj.attachEvent) { obj.attachEvent('on' + ev, fn); }else{ obj.addEventListener(ev, fn, false); } }
注意：attachEvent在ff 和chrome 却用不了 在 ff和chrome是用addEventListener， 它们是click 而IE中是onclick
