【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不要混着用。