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

时间：2023-12-30 11:49:44

　　最近突然要用到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

　　

相关文章