Question

所以我们有一个包含很多复选框的表格，在我们想要调用一些javascript的复选框上我们使用类似于此代码段的内容

addEventObserver(elementId){
        // ($= means 'ends with') this is required for elementIds which are in a table and get prepended with some id
        $$('[id$=:'+elementId+']').each(function(e) {
            Event.observe(e, 'change', function(event) {
                submitAction(something);
            });
        });
}

因此，在输入复选框下方，我们添加了一个javascript函数调用

<input type="checkbox" name="somename" id="somePrependedIdsomeId">    
<script type="text/javascript" language="javascript">
                    addEventObserver('someId');
                </script>

这适用于我们的测试环境设置。在生产中虽然我们有大约700个复选框的表，但这会使浏览器/ cpu卡住。

我们使用jsf

Answer 1

我会废弃为每个复选框添加一个事件监听器，以支持编写附加到容器元素的单个“智能”事件处理程序。这是一个简单的例子：

var theDiv = document.getElementById("foo");
theDiv.onchange = function(e) {
    if (e.target.tagName.toLowerCase() == "input" 
          && e.target.type.toLowerCase() == "checkbox") {
        alert("do something");
    }
}

演示：http://jsfiddle.net/xFC3A/

onchange事件因此被容器div捕获，容器div是起泡的。附加到div的事件可以测试触发事件的元素类型（source/target element depending on the browser）并做出相应的反应。主要优点是：

只有一个事件处理程序 - 没有时间将处理程序绑定到数百个元素。
它将继续处理动态添加的元素（通过AJAX，JS等）。

Read more about Event Delegation.

一些有用的参考：http://www.quirksmode.org/js/events_properties.html

Answer 2

我不是一个原型骑师（更多的是jQuery人），但一般来说，任何使用属性选择器的选择器都会变慢。如果你在700多个项目上运行那个选择器，你肯定会遇到大幅减速。

你也在使用Prototype的each()方法......你能不能重新编写东西来使用原生的javascript for（）循环？再次，在这里引用jQuery，但是我尽可能使用本机JS而不是库方法获得了令人难以置信的性能提升。通过删除一堆jQuery .each（）方法并将其替换为native for（）循环，我已经将Web应用程序加速了20倍。

Answer 3

我认为活动代表团应该帮助您，简单地将死亡事件附加到所有复选框的父级

$('container').observe("change", changeBy);

function changeBy(e){
                if (e.element().identify() != "container") {
            doChange(e.element());
        }
}

function doChange(elem){
  submitAction(something);
}

标记：

<div id="container"> <input type="checkbox" > ... </div>

你不需要做foreach而且你没有数百个eventhandler，你只需要一个EventHandler，这非常快。

Answer 4

Prototype已经通过Event.on提供了事件委派：

$('id_of_table').on('change', 'input[type=checkbox]', some_handler_function);

Event.observe使用原型javascript，替代品效率低下？

4 个答案: