Discuss / JavaScript / 建议:好像缺少了代理事件的知识点
Back

建议:好像缺少了代理事件的知识点

Topic source

野子Vito

#1 Created at ... [Delete] [Delete and Lock User]

与之前相比，jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性，然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。最好的解释方法就是使用实例：

$('#myTable TD').click(function(){
$(this).css('background', 'red');
});

当我们点击表格中的单元格时，上面的代码将使所有单元格背景变为红色。比方说，你有一个10列、50行的网格，那么就会绑定上500个事件。

嗯，这时就是事件代理出场的时候了：

$('#myTable').bind("click",function(e){
var clicked = $(e.target);
clicked.css('background', 'red');
});

'e'包含了事件的信息，包括了实际接收到click事件的目标元素。我们所要做的就是检查是哪个单元格被点击了。相当的巧妙！

事件代理带来了另外一个好处。正常情况下，在你往一个元素集合绑定一个事件，该事件仅仅只是绑定到这些集合元素上。如果你向DOM中添加了新的元素，尽管这些新元素被选择器所匹配，但是这些新元素并不会绑定上事件处理（你同意我的观点吗？），因此不会有事件发生。 ? 当使用事件代理时，你能够在事件被DOM绑定后仍然可以添加多个被匹配的元素到其中，而它们同样能够正常工作。

木子_浩子

#2 Created at ... [Delete] [Delete and Lock User]

倒数第二段，你说“如果你DOM中添加了新的元素，尽管这些新元素被选择器所匹配，但是这些新元素并不会绑定上事件处理，因此不会有事件发生。”我不知道下面是不是你所指的那种： HTML代码：

    <p class="test" id="first_text">这是一个段落</p>
    <button type="button" id="addPBtn">点击新增段落</button>

javascript代码：

$("p.test").click(function(){
        alert("为p.test绑定的函数");                    
    });
$("#addPBtn").click(function(){
       $("#first_text").append("<p class='test'>新增段落</p>");
    });

点击新增段落按钮后，新增的p段落也是有绑定到事件的，然后我就有点怀疑你所说的使用事件代理的这个好处了。菜鸟一个，请指教！

  • 1

Reply