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

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的事件可以测试触发事件的元素类型(源/目标元素取决于浏览器)并做出相应的反应.主要优点是:

1. 只有一个事件处理程序 - 没有时间浪费绑定处理程序到数百个元素.
2. 它将继续处理动态添加的元素(通过AJAX,JS等).

阅读有关事件委派的更多信

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