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>

//自定义一个函数，可以直接使用<br>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

posted @ 2015-12-10 13:55 培杰阅读(493) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

Jack

JS脚本动态给元素/控件添加事件

公告