jQuery的直播功能

的簡單版本是有可能得到的任何地方具有相似的功能jQuery的live()事件處理純javascript函數？我需要能夠將事件附加到尚未創建的對象上，但jquery-livequery以及jquery-events源由於依賴於jQuery核心而無用。jQuery的直播功能

來源

2011-07-25 mike_hornbeck

是的，是否有可能。Jquery是用JavaScript語言創建的一個庫。所有功能都可以自行改寫 –

爲什麼要重新發明這個輪子？這個函數依賴於jQuery有什麼問題？ – Sparky

你用什麼方法向頁面添加新元素？爲什麼你不能在添加元素的相同代碼中連接事件？ – ErikE

活動委派很簡單。就拿這個例子：

標記：

<div id="container"> 
    <p>Test</p> 
    <p>Test</p> 
    <p>Test</p> 
</div> 

<button id="add">Add new paragraph</button>

腳本：

document.getElementById("container").onclick = function(e) { 

    // e.target is the target of the event or "source element" 
    alert(e.target.innerHTML); 
}; 

// dynamically adds new paragraph on button click 
document.getElementById("add").onclick = function() { 
    var p = document.createElement("p"); 
    p.innerHTML = "a new paragraph"; 
    document.getElementById("container").appendChild(p); 
};

由於事件處理程序連接到母體，它會爲插入任何未來元素的工作。

You can try it here.

有用的參考：

來源

2011-07-25 23:43:09 karim79

jQuery是純JavaScript和開放源代碼，所以只要看看我們的代碼，然後複製你需要什麼並適應它。

來源

2011-07-25 23:43:19

+1更不用說它已經通過了瀏覽器測試。我永遠不會明白，爲什麼人們覺得需要「重新發明輪子」，而沒有更大的目的。 – Sparky

我認爲它很好奇;）但另一方面，單獨處理IE的可能性會讓我感到噁心;） –

不像jQuery看起來像常規的DOM操作。它建立在它自己的迷你平臺上的很多層中，因此弄清楚在相對簡單的jQuery操作中實際進行的DOM調用可能非常令人生畏。我並不是說這對jQuery不利，只是你的建議不像使用jQuery那樣容易。在發現實際調用DOM之前，您必須深入瞭解它，然後，您發現不容易複製或移出jQuery，因爲它使用了很多自己的平臺。 @ karim79的答案更有幫助。 – jfriend00

是的，這就是所謂的事件代表團，並已經有超過jQuery和「活」。

「活」的工作原理是監聽在閥體上或文檔事件，那麼當事件發生時着眼於event.target，看看它的選擇相匹配的存儲在緩存中的一個。這是相當低效的，但對一些工程確定。

一個更有效的方法是在添加要監聽元素的數組，然後偵聽要委派事件元素的最低共同祖先冒泡事件。 body元素是後備，但效率最低。當偵聽器得到一個正在等待的事件時，檢查event.target是否是數組中的一個元素，如果是，請使用這個調用相關函數。

用戶也可以直接在元素的ID存儲爲一個對象的屬性，以便查找它的速度更快，如果你有很多的元素，或者您可以註冊基於類的事件。

有一些限制和弱點（某些瀏覽器中的某些事件冒泡，但不是其他瀏覽器，有些則完全不冒泡），並且效率非常低，請小心使用。

來源

2011-07-25 23:57:04 RobG

+1關於性能問題以及關於非冒泡事件和瀏覽器實現不一致的警告信息。 – CMS

有一篇關於jQuery的.live擴展名爲[爲什麼你不應該使用jQuery Live]的有趣文章（http://jupiterit.com/news/why-you-should-never-use-jquery-live）。大部分細節適用於一般的事件授權。 – RobG

我知道一點jQuery和你的功能。您正在尋找如何在JavaScript中使用事件？你可以這樣：

element.addEventListener('onclick', 
function() { 
    //do something 
});

或

element.onclick = 
function() { 
    //do something 
});

的element變種是DOM文檔的參考。查詢https://developer.mozilla.org/en/DOM瞭解更多詳情。

來源

2011-07-26 00:02:39 User1

jQuery的直播功能

回答

相關問題