码迷,mamicode.com
首页 > Web开发 > 详细

JS中事件绑定

时间:2017-12-04 16:41:10      阅读:198      评论:0      收藏:0      [点我收藏+]

标签: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')

             });

             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()解除上面的捕获事件


JS中事件绑定

标签:js事件绑定

原文地址:http://blog.51cto.com/xwxhvip/2047250

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!