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

 

本文转自 新网学会 51CTO博客,原文链接: http://blog.51cto.com/xwxhvip/2047250,如需转载请自行联系原作者

相关文章
|
JavaScript 前端开发
js事件绑定的几种方式
js事件绑定的几种方式
177 0
|
JavaScript 前端开发
js事件绑定的几种方法?
js事件绑定的几种方法?
|
JavaScript 前端开发 C++
JavaScript 添加事件绑定的三种方法
JavaScript 添加事件绑定的三种方法
497 0
|
XML 移动开发 JavaScript
【JavaScript-DOM重点核心】事件绑定,解除事件,DOM事件流
【JavaScript-DOM重点核心】事件绑定,解除事件,DOM事件流
172 0
【JavaScript-DOM重点核心】事件绑定,解除事件,DOM事件流
|
JavaScript
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
126 0
|
JavaScript 前端开发
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
161 0
|
JavaScript 前端开发
Javascript事件绑定常见方案详解
Javascript事件绑定常见方案详解让js对用户的操作做出相应的响应,就要对事件进行绑定DOM元素绑定事件处理function函数,不同的操作对应不同的函数名称 常见的三种绑定方式(1)在DOM元素上直接绑定事件(2)在js标签(实现分离)中绑定事件(3)通过DOM lev3级事件绑定标准(事...
1114 0
|
JavaScript 前端开发 安全
|
JavaScript 前端开发 Web App开发
js事件绑定
<div class="markdown_views"> <p>js 中事件绑定不同的浏览器使用不同的方法,如何做到兼容所有的浏览器呢? <br> 火狐浏览器支持document.addEventListener ,但是不支持document.attachEvent. <br> chrome支持document.addEventListener,不支持document.atta
1424 0
|
JavaScript 前端开发
Javascript事件绑定的几种方式
 Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):   [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。
1090 0