0

好的，我正在构建一个网页，并且我已经开始使用 JQuery，并且我经常将它用于侦听器（keyup、focusin、focusout ...）

我对它们的存储方式有疑问。

我拥有的其中一个页面具有动态内容，其中用户选择了一个日期，并且 php 脚本在表格中返回了一堆数据。在这些表上，我有一个 javascript 函数，当按下一个单元格时，会打开一个区域，我用表单的 html 代码加载它。此表格对于每个单元格都是相同的，它只是根据按下的单元格更改时间和日期。我的解决方案是这个 html 是使用提到的 javascript 函数编写的。

现在在该表单上，当触发某些事件时，我分配了一个侦听器，即

function livesearch(el, about, event) {
    if ( event.keyCode < 96 || event.keyCode > 105 ) {
        return;
    }

    var keyword = el.value;

    $(el).focusout(function() {
        $('#livesearch_results1').html('');
        $('#livesearch_results2').html('');
    });
...
}

它有效，但我想知道它的正确性。每次创建新表单时，这些侦听器是否会聚集起来......它们是否会相互覆盖（因为表单是由每个单元格的相同 javascript 生成的，所以 id 是相同的）

4

1 回答 1

2

使用委托事件：$.on

例子：

$("body").on("focusout","yourelement",function(){
});

$("body").on("focusin","yourelement",function(){
});

在我发布的链接中的直接和委托事件部分下。你会看见：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

除了能够处理尚未创建的后代元素上的事件之外，委托事件的另一个优点是当必须监视许多元素时，它们的开销可能会大大降低。在其 tbody 中有 1,000 行的数据表上，此示例将处理程序附加到 1,000 个元素：

我想我不应该在这篇文章中再次解释这些好处。文档解释得很清楚。

于 2013-06-10T08:45:38.787 回答