JavaScript原型最佳实践事件处理程序

Question

嗨，这个问题更多地是关于最佳实践的咨询。有时，在构建完整的ajax应用程序时，我通常会动态添加元素。比如，当你添加一系列项目时，我会像这样做：

var template = new Template("<li id='list#{id}'>#{value}</li>");
var arrayTemplate = [];
arrayOfItem.each(function(item, index){
   arrayTemplate.push(template.evaluate( id : index, value : item))
});

在这两个选项之后，通过“update”或“insert”添加列表。

----- $("elementToUpdate").update("<ul>" + arrayTemplate.join("") + "</ul">); 问题是，如何在不重复读取数组的情况下添加事件处理程序。这是因为如果在更新或插入之前尝试添加事件，则会出现错误，因为该元素尚未出现在DOM中。因此，现在我所做的是在插入或更新后：

arrayOfItem.each(function(item, index){
   $("list" + index).observe("click", function(){
     alert("I see the world");
   })
});

那么问题是是否存在更好的方法来做这件事情？

- ncubica

Answer 1

我不会做 $("list" + index)。

我会考虑两种方法：

1）让点击事件冒泡并在 $("elementToUpdate") 中捕获：

$("elementToUpdate").observe("click", function(evt){
     alert("I see the world");
});

您可以在evt对象中找到被点击的li元素。

2）不要重复使用$("list" + index)，只需

$("elementToUpdate").find("li").each(...);

假设你正在使用jQuery。Prototype也有类似的功能。

- edwin

---

这真的取决于事件处理程序的任务。如果您需要对当前事件目标执行某些操作（例如读取值），则这不足够，因为无法保证Event.target等于当前元素。 - Dormilich

是的，完全正确，find("li") 是再次读取数组，所以我想它的方式有点相似，但语法不同。 - ncubica

+1 *"原型有类似的东西"*，确实：Event#findElement（http://api.prototypejs.org/dom/event/findelement/） - T.J. Crowder

Answer 2

你好，我在原型邮件列表中发布了这个问题，以下是答案：

嗨， 如果你真的想直接观察每个单独的li，那么你所拥有的似乎非常简单明了。但在那种情况下，除非有一个非常好的理由这样做，否则我不会在每个li上使用处理程序；相反，我会监听elementToUpdate（或其中的ul）上的点击事件，只需一个处理程序：

    $("elementToUpdate").observe("click", function(event) { 
        var li; 
        // Find out which `li` was clicked: 
        li = event.findElement("li"); 
        if (li) { 
            // Do something with the `li` 
        } 
    }); 
Prototype 1.7 has a new feature to simplify that a bit: 
    $("elementToUpdate").on("click", "li", function(event, li) { 
        // Do something with the `li`;  note it's given as the second 
        // argument to the function 
    }); 

在幕后，原型基本上正在执行我上面所做的操作。如果您仍在使用1.6版本（而且由于1.7仍处于RC1阶段，我认为您可能确实在使用），则需要第一个版本。

希望有所帮助,

T.J. Crowder 独立软件顾问 tj / crowder software / com www.crowdersoftware.com

链接是：http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/fec98641d72f6fea#

- ncubica

---

哈哈，被引用感到受宠若惊。:-) 但实际上，我认为Edwin已经给出了答案。 - T.J. Crowder