jquery活动函数的简单版本

Question

有没有可能得到一个纯javascript的事件处理函数，其功能与jquery的live()类似？我需要能够将事件附加到尚未创建的对象，但由于对jquery核心的依赖，jquery-livequery和jquery-events源都没有用。

Answer 1

事件委托非常简单。举个例子：

标记：

<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);
};

由于事件处理程序已附加到父级，因此它将适用于将来插入的任何元素。

有用的参考：

• http://www.quirksmode.org/js/events_properties.html#target
• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

Answer 2

是的，它被称为事件委派，它比jQuery和"live“存在的时间更长。

"live“的工作原理是监听主体或文档上的事件，然后当事件发生时查看event.target，看看它的选择器是否与缓存中存储的选择器中的一个匹配。它的效率很低，但对某些人来说还不错。

一种更有效的方法是将您希望侦听器的元素添加到数组中，然后侦听您想要为其委托事件的元素的最低公共祖先上的冒泡事件。body元素是后备元素，但它的效率是最低的。当侦听器获得它正在等待的事件时，检查event.target是否是数组中的元素之一，如果是，则使用该元素调用相关函数，如下所示。

你也可以将元素id存储为一个对象的属性，这样如果你有很多元素，查找它就会更快，或者你可以根据类注册事件。

有一些限制和缺点(一些事件在一些浏览器中冒泡，但其他浏览器不会冒泡，还有一些根本不冒泡)，而且它的效率可能非常低，所以要小心使用。

Answer 3

我对Jquery和你的函数知之甚少。您正在查看javascript中的事件是如何工作的吗？你可以这样做：

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

或

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

element变量是dom文档引用。有关更多详细信息，请查看https://developer.mozilla.org/en/DOM。