继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS中事件绑定

慕用4979188
关注TA
已关注
手记 266
粉丝 63
获赞 531

事件绑定

事件绑定

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')

             });

             oBtn.attachEvent('onclick',function()

             {

                alert('b')

             });

           }

    

            

     </script>

   </head>

   <body>

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

    

   </body>

</html>

 

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

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

 

 

 

 

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

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

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

           { 

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

             oBtn.addEventListener('click',function()

             {

                alert('a')

             });

             oBtn.addEventListener('click',function()

             {

                alert('b')

             });

       

           }

    

            

     </script>

   </head>

   <body>

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

    

   </body>

</html>

 

 

有2个方法绑定事件

分别是

IE方式

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

DOM方式

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

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

可以用if解决兼容问题

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

           { 

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

             if(oBtn.attachEvent)

             {

             oBtn.attachEvent('onclick',function()

             {

                alert('a')

             });

             oBtn.attachEvent('onclick',function()

             {

                alert('b')

             });

             }else

             {

                oBtn.addEventListener('click',function()

             {

                alert('a')

             });

             oBtn.addEventListener('click',function()

             {

                alert('b')

             });

       

               

             }

            

       

           }

    

            

     </script>

   </head>

   <body>

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

    

   </body>

</html>

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

 

   function myAddevent(obj,ev,fn)

        {

           if(obj.attachEvent)

           {

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

           }else

           {

             obj.addEventListener(ev,fn,false);

           }

          

        }

       

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

window.onload=function()

           { 

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

             myAddevent(oBtn,'click',function()

            

             {

                alert('a')

               

             })

                myAddevent(oBtn,'click',function()

            

             {

                alert('b')

               

             })

           }

 

 

2事件捕获

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

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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP