jQuery事件委託爲未添加的元素綁定事件

時間 2019-12-05

原文原文鏈接

在說事件委託以前,先介紹一下事件冒泡。javascript

什麼是javascript事件冒泡？

根據紅寶書，事件開始是由最具體的元素接受，而後逐級傳播到較爲不具體的節點
例如：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>

若是單擊了div,則click事件會按照以下順序傳播
(1)div
(2)body
(3)html
(4)documentjava

由於事件冒泡的原理，咱們就能夠將事件綁定在不具體的父元素上，點擊具體的子元素，觸發其父元素的事件，這就是事件委託。node

什麼是javascript事件委託？

事件委託就是講事件監聽器加在所要綁定元素的父元素上，爲避免給每一個特定的節點增長事件監聽，避免在特定節點被刪除時還要再刪除它的綁定事件。
例子：bootstrap

<ul id="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>
// 找到父元素，添加監聽器...
document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target是被點擊的元素!
    // 若是被點擊的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // do something
    }
});

而後，再介紹jQuery事件委託。框架

jQuery事件委託

這是我在調用bootstrap框架時要使用bootstrap的日曆控件this

<input type="text" class="datetimepicker">

發現若是是動態添加的元素，沒法爲新添加的元素增長事件，因此是無效的，因此咱們應該將點擊生成日曆控件這個方法綁定在它的父元素上，使用jQuery中的on方法spa

$(selector).on(event,childSelector,data,function,map)，

具體實現：code

$parent.on("focus",".datetimepicker",function(){
        $(this).datetimepicker({
            language:  'fr',
            format:'yyyy-mm-dd',
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
});
還有一個方法是live(),不過在jQuery1.7中已被廢棄，由on()取代，就不提啦。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。