• Javascript动态绑定


    <div onclick="test()"></div>
    <script>
        function test(){
            //code
        }
    </script>

    上面这种方法是很low逼的,用了这种方法工资就涨不上去你信不信?下面这种也是...

    <div id="test"></div>
    <script>
        var test = document.getElementById("test");
        test.onclick = function(){
            //code
        };
    </script>

    能不能用一个稍微有点逼格的方法?

    <div id="test"></div>
    <script>
        var test = document.getElementById("test");
        test.addEventListener("click",function(){
            //code
        });
    </script>

    addEventListener() 还能解绑

    <div id="test"></div>
    <script>
        var test = document.getElementById("test");
        function testFunction(){
            //code
        }
        test.addEventListener("click",testFunction);
        test.removeEventListener("click",testFunction);
    </script>

    听说这个方法对IE8无法向下兼容?没关系,我们还有attachEvent/detachEvent

    <div id="test"></div>
    <script>
        var test = document.getElementById("test");
        function testFunction(){
            //code
        }
        
        //绑定
        if (test.addEventListener) {
            test.addEventListener("click", testFunction);
        } else if (test.attachEvent) {
            test.attachEvent("onclick", testFunction);
        }
        
        //解除
        if (test.removeEventListener) {
            test.removeEventListener("click", testFunction);
        } else if (test.detachEvent) {
            test.detachEvent("onclick", testFunction);
        }
    </script>

     有一种库叫做jQuery...你可以用bind(),这么写...

    <div id="test"></div>
    <script>
        $("#test").bind("click",function(){
            //code
        });
        $("#test").unbind("click");
    </script>

    这么写...

    <div id="test"></div>
    <script>
        $("#test").bind("click mousemove",function(){
            //code
        });
    </script>

    这么写...

    <div id="test"></div>
    <script>
        $("#test").bind({
            "click":function(){
                //code
            },
            "mousemove":function(){
                //code
            }
        });
    </script>

    还可以用live(),向当前或未来的匹配元素添加一个或多个事件处理器。可以这样写...

    <div id="test"></div>
    <script>
        $("#test").live("click",function(){
            //code
        });
        $("#test").die("click");
    </script>

    还可以这样写...

    <div id="test"></div>
    <script>
        $("#test").live("click mousemove",function(){
            //code
        });
    </script>

    换着姿势写...

    <div id="test"></div>
    <script>
        $("#test").live({
            "click":function(){
                //code
            },
            "mousemove":function(){
                //code
            }
        });
    </script>

    还可以用delegate()   为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,适用于当前或未来的元素(比如由脚本创建的新元素)。

    <div class="test">
        <div id="test_inside"></div>
    </div>
    <script>
        $(".test").delegate("#test_inside","click",function(){
            //code
        });
    </script>
    
    <script>
        $(".test").delegate("#test_inside","click mousemove",function(){
            //code
        });
    </script>
    
    <script>
        $(".test").delegate("#test_inside",{
            "click":function(){
                //code
            },
            "mousemove":function(){
                //code
            }
        });
    </script>

    可是人家官网说了...

    自从jquery1.7版本以后bind()函数推荐用on()来代替

    live()只被jquery1.9版本以下支持,jquery1.9及其以上版本删除了这个方法,jquery1.9以上版本用on()方法来代替。

    delegate()倒是一直保留着,可适用于jquery1.4.2及其以上版本,但是名字太丑了。

    于是就这样...

    <div class="test">
        <div id="test_inside"></div>
    </div>
    <script>
    $(".test").on("click", "#test_inside", function () {
        //code
    });
    $(".test").off("click");
    </script>

    就这样...

    <div class="test">
        <div id="test_inside"></div>
    </div>
    <script>
        $(".test").on("click mousemove","#test_inside",function(){
            //code
        });
    </script>

    就这样...

    <div class="test">
        <div id="test_inside"></div>
    </div>
    <script>
        $(".test").on({
            "click":function(){
                //code
            },
            "mousemove":function(){
                //code
            }
        },"#test_inside");
    </script>

    就这样被你征服...

    注意:on()和delegate()两个参数的位置正好相反...城里人真会玩!Orz~~

    补充说明:

    bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置

    <div class="test"></div>
    <script>
        //利用bind()方法,给P标签设置click方法   ======失败 没有任何反应=======
        $(".test p").bind("click", function () {
            alert("bind()添加单击事件成功!");
        });
    
        //利用live()方法.给P标签设置click方法   =======成功调用方法============
        $(".test p").live("click", function () {
            alert("live()添加单击事件成功!");
        });
    
        //利用delegate()方法.给P标签设置click方法  =======成功调用方法============
        $(".test").delegate("p", "click", function () {
            alert("delegate()添加单击事件成功!");
        });
    
        //利用on()方法.给P标签设置click方法  =======成功调用方法============
        $(".test").on("click", "p", function () {
            alert("on()添加单击事件成功!");
        });
        $(".test").append("<p>test</p>");
    </script>

    写在结尾

    关于版本问题,这个事情不得不说。

    bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+。

    这是个让人纠结的问题,当一个天秤座的强迫症患者面对不同版本的jQuery和不同版本时代的方法的时候,选择成为了一个大问题。

    但是如果你去看一看现在主流的js框架的源码你会发现,

    怎么这么多on()啊啊啊啊啊啊啊啊

    所以,用on()就对了!

    其他的方法,封装了半天,最后底层代码还是调用onclick()什么的!

    诚然,我也很讨厌废话,

    写了那么长,有2/3都是在放屁!

    可是总结就是这样,

    做笔记就是这样,

    来龙去脉要搞清楚,

    因为我是一个天秤座的强迫症患者!

  • 相关阅读:
    网站添加手机短信功能
    FileWriter的正确使用,请及时关闭流
    myeclipse9.0没有提示
    Integer.getInteger,are you kinding me? 好吧, 我还是没怎么弄明白,求高人解答。。。
    构造方法充当临时对象&Calendar的使用
    关于Spring IOC的一点个人理解
    在JAVA中使用GUID
    动态生成table下的<tr>标签不显示
    MD5加密实例
    String,StringBuffer 和 StringBuilder 的区别
  • 原文地址:https://www.cnblogs.com/zcynine/p/4987893.html
Copyright © 2020-2023  润新知