天天看点

JS中事件绑定

事件绑定

IE方式

       attactEvent(事件名称,函数),绑定事件处理函数

       derachEvent(事件名称,函数),解除绑定

DOM方式

       addEventListener(事件名称,函数,捕获)

       removeEventListener(事件名称,函数,捕获)

绑定事件代码:

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

           { 

             var oBtn=document.getElementById('btn1');

             oBtn.attachEvent('onclick',function()

             {

                alert('a')

             });

                alert('b')

           }

     </script>

   </head>

   <body>

     <input id="btn1" type="button" value="按钮" />

   </body>

</html>

以上代码使用了attactEvent(事件名称,函数),绑定事件处理函数 注意(事件名称前面加on)

只能在IE里面用,在别的浏览器会报错

使用addEventListener(事件名称,函数,捕获)的代码 注意事件名称前面不加on

这个只能使用于火狐 chrome 和IE9浏览器 在IE7会报错

             oBtn.addEventListener('click',function()

有2个方法绑定事件

分别是

他们2个都只能使用于一种浏览器,

可以用if解决兼容问题

             if(oBtn.attachEvent)

             }else

             {

                oBtn.addEventListener('click',function()

             }

如果以后用绑定很麻烦,可以把绑定写一个函数,以后我们用直接调用就可以了

   function myAddevent(obj,ev,fn)

        {

           if(obj.attachEvent)

           {

             obj.attachEvent('on'+ev,fn)

           }else

           {

             obj.addEventListener(ev,fn,false);

        }

上面是编写好的绑定函数,我下面来调用

window.onload=function()

             myAddevent(oBtn,'click',function()

             })

                myAddevent(oBtn,'click',function()

2事件捕获

a.setCapture()把网页所有事件全部集中到a里

a.releaseCapture()解除上面的捕获事件

继续阅读