Question

是否有可能获得具有与jquery的live()类似功能的事件处理程序的纯javascript函数？我需要能够将事件附加到尚未创建的对象，但由于依赖于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);
};

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

You can try it here.

有用的参考：

Answer 2

是的，它被称为事件委托，并且比jQuery和“live”的时间更长。

“live”通过侦听正文或文档上的事件来工作，然后当事件发生时查看event.target以查看它的选择器是否与存储在缓存中的选择器匹配。这是非常低效的，但对某些人来说还可以。

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

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

有一些限制和缺陷（某些浏览器中有些事件泡沫但其他浏览器没有，有些事件根本没有泡沫），而且效率非常低，因此请小心使用。

Answer 3

我对Jquery和你的功能知之甚少。您正在寻找如何使用javascript中的事件？你可以这样做：

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

或

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

element var是dom文档的引用。查看https://developer.mozilla.org/en/DOM了解更多详情。

Answer 4

JQuery是纯JavaScript和OpenSource，所以只需查看源代码，然后复制所需内容并进行调整。

简单版的jquery live函数

4 个答案: