zoukankan      html  css  js  c++  java
  • js事件绑定

    事件绑定,常见的是odiv.onclick=function(){..........};  这种方式绑定事件太单一,如果绑定多个,那么最后一个事件会覆盖掉之前的,也就是说只执行最后一次绑定的事件,这里要说的是addEventListener方法,和IE下的attachEvent方法:

    html代码如下:

    <html>
     <head>
     </head>
    <style>
    #box{
        height:400px;
        400px;
        background: red;
    }
    #son1{
        height:300px;
        300px;
        background: green;
    }
    #son2{
        height:200px;
        200px;
        background: purple;
    }
     </style>
     <script>
    
    </script>
     <body>
        <div id='box'>box
            <div id='son1'>son1
                <div id='son2'>son2
    
                </div>
            </div>
        </div>
          
     </body>
     </html>
    界面如下图:


    下面是<script>中的代码(非IE浏览器下addEventListener):

     window.onload=function(){
        var obox=document.getElementById('box');
        var oson1=document.getElementById('son1');
        var oson2=document.getElementById('son2');
    
        oson2.addEventListener('click',function(){alert('son2 dinaji');})
        oson1.addEventListener('click',function(){alert('son1 dinaji');})
        obox.addEventListener('click',function(){alert('box dinaji');})
    }

    上述代码的addEventListener()只有两个参数,其实还有第三个参数:true/false  。默认的是false,代表在冒泡阶段调用事件处理程序,true代表在事件捕获阶段处理程序,

    生活中还是以冒泡阶段处理为多。下面是IE下:

     window.onload=function(){
        var obox=document.getElementById('box');
        var oson1=document.getElementById('son1');
        var oson2=document.getElementById('son2');
    
    oson2.attachEvent('onclick',function(){alert('son2 dinaji');})
        oson1.attachEvent('onclick',function(){alert('son1 dinaji');})
        obox.attachEvent('onclick',function(){alert('box dinaji');})
    
    }
    IE下attachEvent()只有两个参数,没有第三个参数的true或false。因为IE默认的就只能是冒泡阶段捕获,这是当年浏览器大战的原因,个人猜测,可能是因为IE用户量多吧,导致现在默认的都是在冒泡阶段处理。
    事件绑定最大的好处是可以绑定多个事件,对同一个元素对象上绑定的多个事件来说,非IE下这些事件的处理顺序是符合代码绑定的先后顺序的,但在IE下对于多个事件绑定的处理顺序正好相反。如:

    非IE:

    oson2.addEventListener('click',function(){alert('first');},true);  //先弹出 first
    oson2.addEventListener('click',function(){alert('second');},true); //后弹出 second
    IE:

    oson2.attachEvent('onclick',function(){alert('first');});      //后弹出first
    oson2.attachEvent('onclick',function(){alert('second');}); //先弹出second

    既然能绑定事件,肯定能取消绑定事件,非IE下为removeEventListener(),IE 下为detachEvent()  ,这里需要注意的是括号内的参数必须和事件绑定时的参数一样,但对于匿名函数来说,哪怕函数一样也取消不了绑定,因为两者被认为是不同的,如下代码就取消不了绑定:

    oson2.addEventListener('click',function(){alert('first');}); 
    oson2.removeEventListener('click',function(){alert('first');}) //取消绑定不成功

    本人又用了函数声明式尝试一下发现也不行:

    oson2.addEventListener('click',function test(){alert('first');});   
    oson2.removeEventListener('click',function test(){alert('first');});

    如上面两段代码所述把匿名函数function (){alert('first');} 改为function test(){alert('first');}一样不行。

    结论:不管是匿名函数,还是函数声明都视为不同参数,不能成功取消绑定。

    解决方法就是先声明一个函数,两者传入共同的函数名即可:

    先声明函数:

    var test=function(){alert('first');};
    再把函数名当参数传入:

    oson2.addEventListener('click',test);
    oson2.removeEventListener('click',test); //成功取消绑定
    以上代码是能成功的,但还要注意第三个参数也要一致,上述代码没有第三个参数则默认都是false,如果一个为true,那也不能取消成功:

    oson2.addEventListener('click',t,true); //第三个参数为true表示 捕获时执行事件程序
    oson2.removeEventListener('click',t);   //默认为false ,不同的参数,不能取消绑定
    两者都为true即可:
    oson2.addEventListener('click',t,true);
    oson2.removeEventListener('click',t,true);
    下面是为解决浏览器兼容封装事件绑定:

    function addEvent(element,event,fun){
        if(element.addEventListener)
        {
            element.addEventListener(event,fun);
        }
        else if(element.attachEvent)
        {
            element.attachEvent('on'+event,fun);//注意要加on
        }
    }
    下面是取消事件绑定的封装:

    function removeEvent(element,event,fun){
        if(element.removeEventListener)
         {
            element.removeEventListener(event,fun);
         }
        else if(element.detachEvent)
        {
            element.detachEvent('on'+event,fun);//注意要加on
        }
    
    }

    封装后再使用事件绑定和取消绑定就方便很多:


    var t=function(){alert(' box ');};
    var t1=function(){alert(' son1 ');};
    var t2=function(){alert(' son2 ');};

    绑定:

    addEvent(obox,'click',t);
    addEvent(oson1,'click',t1);
    addEvent(oson2,'click',t2);
    取消绑定:

    removeEvent(obox,'click',t);
    removeEvent(oson1,'click',t1);
    removeEvent(oson2,'click',t2);

    以上就是事件绑定的内容,也是自己的一次回顾。


  • 相关阅读:
    POJ1486 Sorting Slides 二分图or贪心
    POJ2060 Taxi Cab Scheme 最小路径覆盖
    POJ3083 Children of the Candy Corn 解题报告
    以前的文章
    POJ2449 Remmarguts' Date K短路经典题
    这一年的acm路
    POJ3014 Asteroids 最小点覆盖
    POJ2594 Treasure Exploration 最小路径覆盖
    POJ3009 Curling 2.0 解题报告
    POJ2226 Muddy Fields 最小点集覆盖
  • 原文地址:https://www.cnblogs.com/chayangge/p/4288686.html
Copyright © 2011-2022 走看看