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

    1.在一个元素上加两次一样的事件后面的事件会把前面的事件给覆盖掉。这个时候就要用到事件绑定。

    2.事件绑定: 在ie下面可以用attachEvent(事件名,函数),注意在事件名的时候要加上'onclick',不然的话会报错。

    火狐和chrome下同样有个做事件绑定的 addEventListener(事件名,函数,false)

    这里和上面的有点区别就是这里的事件名是不带on的。而上面的是要带on的。这种方式在ie9及以上是兼容的,而在ie78下是不兼容的。

    3.这样就需要写一个ifelse来判断一下。这个时候可以发现。在ie9及以上和火狐,chrome下都是没有任何问题的。但是在ie7,8下他弹出的顺序是反的,这是微软自己的问题。他的执行顺序正好是和你绑定的事件相反的。影响不大。

    4.每次写的时候都要判断一下这样会很麻烦,所以可以把这个封装成一个函数,这样每次用的时候就可以直接调用。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
            function myAddEvent (obj,ev,func)
            {
                if(obj.attachEvent)
                {
                    obj.attachEvent('on'+ev, func);
                }
                else
                {
                    obj.addEventListener(ev,func,false);
                }
    
            }
            window.onload = function ()
            {
                var oInput = document.getElementsByTagName('input')[0];
              /* if(oInput.attachEvent){
                oInput.attachEvent('onclick',function(){
                    alert('a');
                });
                oInput.attachEvent('onclick',function(){
                    alert('b');
                });
                }
                else{
                oInput.addEventListener('click',function(){
                    alert('a');
                },false);
                oInput.addEventListener('click',function(){
                    alert('b');
                },false);
                }*/
                myAddEvent(oInput,'click',function(){
                    alert('a');
                });
                myAddEvent(oInput,'click',function(){
                    alert('b');
                })
    
            }
        </script>
    </head>
    <body>
    <input type="button" value="按钮"/>
    
    </body>
    </html>

    IE方式 detachEvent(事件名,函数),接触绑定

    removeEventListener(事件名,函数,捕获)来解除绑定。

  • 相关阅读:
    排序二——交换排序
    桥接模式 Bridge
    外观模式Facade(解耦)
    装饰模式和代理模式的区别
    代理模式 proxy
    装饰器模式 Decorator
    适配器模式
    android launcher-启动过程
    ubuntu 编译openwrt
    Eclipse Memory Analyzer tool(MAT)
  • 原文地址:https://www.cnblogs.com/zhuni/p/4802623.html
Copyright © 2011-2022 走看看