【JavaScript系列】动态绑定事件方法：(1)jquery的on方法；(2)html元素绑定

时间 2019-11-08

标签 JavaScript系列动态绑定事件方法 jquery html 元素栏目 JQuery 繁體版

原文原文链接

1、动态监听加载对象

当使用js或jQuery动态建立元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener监听事件时，事件并不会触发，由于传统的$('.selector').click()只能监听html初始的对象，对于动态加载的操做，须要在加载后给他的操做行为绑定方法。 javascript

因此，咱们能够使用jQuery的on()事件来获取未加载页面的内容，并为它添加一个或多个事件处理程序。css

2、jQuery.on()用法

一、定义和用法

（1）on() 方法在被选元素及子元素上添加一个或多个事件处理程序。html

（2）自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来不少便利，咱们推荐使用该方法，它简化了 jQuery 代码库。java

（3）注意：使用 on() 方法添加的事件处理程序适用于当前及将来的元素（好比由脚本建立的新元素）。jquery

（4）提示：如需移除事件处理程序，请使用 off() 方法。app

（5）提示：如需添加只运行一次的事件而后移除，请使用 one() 方法。dom

二、语法

$(selector).on(event,childSelector,data,function)spa

3、事件绑定方式执行顺序：html属性 > dom元素（onclick方法）

先看例子1code

<body>
    <p id="p-style" class="p-style" onclick="htmlOnclick()">点击这个段落。</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // onclick这个是经过 dom元素属性 绑定事件，只能有一个事件执行. DOM level 0
        var a = document.getElementById('p-style');
        a.onclick = function () {
            console.log("六、段落被点击了。");
        };
        a.onclick = function () {
            console.log("七、段落被点击了。");
        };
    });

    // 经过 html属性 绑定事件，只能有一个事件执行
    function htmlOnclick() {
        console.log("四、段落被点击了。");
    }

</script>

输出结果：cdn

七、段落被点击了。

说明：4和6绑定的点击事件被7的事件覆盖。

分析：

（1）不一样绑定事件方式的执行顺序：html属性 > dom元素属性

（2）同一种绑定事件方式顺序：写在前面 > 写在后面

说明：实际项目中，jq和原生js不要混着用。

4、事件绑定方式执行顺序：html属性 > dom元素（onclick方法） > DOM level 2 事件

咱们看个栗子

<body>
    <p id="p-style" class="p-style" onclick="htmlOnclick()">点击这个段落。</p>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var a = document.getElementById('p-style');
        // 这个on的方法，click方法，原生的addEventListener原理一致. DOM level 2
        $("p").on("click", function () {
            console.log("一、段落被点击了。");
        });
        $(".p-style").on("click", function () {
            console.log("二、段落被点击了。");
        });
        $(".p-style").click(function () {
            console.log("三、段落被点击了。");
        });
        $(".p-style").click(function () {
            console.log("五、段落被点击了。");
        });
        a.addEventListener('click',function(){
            console.log("八、段落被点击了。")
        })
        a.addEventListener('click',function(){
            console.log("九、段落被点击了。")
        })

        // onclick这个是经过 dom元素属性 绑定事件，只能有一个事件执行. DOM level 0
        a.onclick = function () {
            console.log("六、段落被点击了。");
        };
        a.onclick = function () {
            console.log("七、段落被点击了。");
        };
    });

    // 经过 html属性 绑定事件，只能有一个事件执行
    function htmlOnclick() {
        console.log("四、段落被点击了。");
    }

</script>

输出结果：

七、段落被点击了。
一、段落被点击了。
二、段落被点击了。
三、段落被点击了。
五、段落被点击了。
八、段落被点击了。
九、段落被点击了。

说明：经过addEventListener方式绑定事件（jq的on方法，js的click方法）是能够绑定多个事件。

分析：

（1）不一样的绑定方式执行顺序：html属性 > dom元素（DOM level 0 事件） > DOM level 2 事件。

（2）DOM level 2 事件中：谁先绑定谁先执行。

（3）jq的on，js的click，addEventListener，能够绑定多个事件。

说明：实际项目中，jq和原生js不要混着用。

5、动态绑定：jq的on方法+html的属性onclick方法

实用jq或者原生js建立元素（好比：append，appendChild，insertBefoe等），实用on(event, fun)或者addEventListener等传统的监听事件，事件不会触发。缘由：不能这些方法只能监听到html初始化的对象，后续动态添加的方法须要寻找其余绑定方法。jq的on()方法+html的属性onclick方法。

<body>
    <input id="txt1" type="text" />
    <input id="btn1" type="button" value="建立li" />
    <ul id="ul1"></ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#btn1").on("click", function () {
            var oli = document.createElement('li');
            var otxt = document.getElementById("txt1");
            var oul = document.getElementById("ul1");

            oli.innerHTML = otxt.value + '<a onclick="deleteItem()" class="ac" id="ac" href="javascript:;">删除</a>';
            ali = oul.getElementsByTagName("li");

            if (ali.length > 0) {
                oul.insertBefore(oli, ali[0]);
            }
            else {
                oul.appendChild(oli);
            }
        });

        // on, click 都属于 DOM level 2 事件
        $('.ac').on('click', function () {
            console.log('一、删除按钮。')
        });
        $('.ac').click(function () {
            console.log('二、删除按钮。')
        });


        //动态监听 
        $(document).on('click', '.ac', function () {
            console.log('四、删除按钮。')
        });
    });

    // addEventListenner 都属于 DOM level 2 事件
    var ac = document.getElementById("ac")
    if (ac) {
        ac.addEventListener('click', function () {
            console.log('三、删除按钮。')
        });
    } else {
        console.log('未获取到dom元素。')
    }

    // html元素绑定 DOM level 0 事件
    function deleteItem() {
        console.log('五、删除按钮。')
    }

</script>

咱们发现，点击删除的时候，输出

五、删除按钮。
四、删除按钮。
说明：

一、执行顺序：html的属性绑定比jq的on方法快。（html属性绑定>DOM level 2 事件）

二、动态绑定事件方法：（1）jq的on方法；（2）html的属性绑定。

说明：实际项目中，jq和原生js不要混着用。

6、总结

上面例子的jq是1.10的版本。

一、事件的绑定方法：（1）html属性绑定（好比：onclick），（2）dom元素属性（好比onclick），也叫DOM level 0 事件，（3）原生的addEventListener和jq的on和jq的click（DOM level 2 事件）。

二、绑定方法的执行顺序：html属性 > dom元素属性 > DOM level 2 事件

三、同一种绑定事件方式顺序：写在前面 > 写在后面。

四、html属性和dom元素属性绑定方法最终只有最后一个事件会执行。