将onclick事件添加到大型html表中的input元素会导致页面呈现速度变慢。如何提高性能？

Question

向大型html表(大约2000行)中的输入元素(type=image)添加onclick事件会导致页面呈现缓慢(在IE9中)。输入元素每行出现一次。如果我移除onclick，它的渲染速度会更快。onclick调用javascript函数。有没有其他方法可以附加事件而不会减慢渲染速度？javascrpt函数位于一个包含在头部的.js文件中，它调用ajax调用不同的页面来加载div并将其显示为弹出对话框(jquery-ui对话框)。

<table class="tables_wrapper" style="width: 1450px; table-layout:fixed">
    <colgroup>
        <col style="width: 150px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 150px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 150px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 150px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 150px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 30px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 30px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 30px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 100px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 150px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 30px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 30px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 100px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 100px; word-wrap:break-word; word-break: break-all; " />
        <col style="width: 100px; word-wrap:break-word; word-break: break-all; " />
    </colgroup>
    <asp:Repeater runat="server" EnableViewState="false" ID="repeater1">
        <ItemTemplate>
            <tr>
                <td><%# ((User)Container.DataItem).Name%></td>
                <td><%# ((User)Container.DataItem).Name1%></td>
                <td><%# ((User)Container.DataItem).Name2%></td>
                <td><%# ((User)Container.DataItem).Name3%></td>
                <td><%# ((User)Container.DataItem).Name4%></td>
                <td><%# ((User)Container.DataItem).Name5%></td>
                <td><%# ((User)Container.DataItem).Name6%></td>
                <td><input type="image" src="images/tick.png" alt="" onclick='ShowName("<%# ((User)Container.DataItem).Name7 %>", this); return false;' /></td>
                <td><%# ((User)Container.DataItem).Name8%></td>
                <td><%# ((User)Container.DataItem).Name9%></td>
                <td><%# ((User)Container.DataItem).Name10%></td>
                <td><%# ((User)Container.DataItem).Name11%></td>
                <td><%# ((User)Container.DataItem).Name12%></td>
                <td><%# ((User)Container.DataItem).Name13%></td>
                <td><%# ((User)Container.DataItem).Name14%></td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>

Answer 1

使用事件委派，在这种情况下，这意味着向整个表添加一个click事件处理程序，并检查产生事件的元素，以决定采取什么操作。

例如：

yourTable.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeName.toLowerCase() == "input" && target.type == "image") {
        alert("Image input clicked");
    }
};

演示：http://jsfiddle.net/timdown/s5bDL/

Answer 2

只需添加一个eventhandler；

js

function handle(e){
 var img=e.target||window.event.srcElement;
 img.type!='image'||alert(img.src);
 //img.type!='image'||(YOURJQUERYFUNCTION())
}
document.getElementsByTagName('table')[0].onclick=handle;

html

<table>
 <tr><td><input type="image" src="http://placekitten.com/50/50"></td><td>a2</td></tr>
 <tr><td><input type="image" src="http://placekitten.com/50/50"></td><td>b2</td></tr>
</table>

示例

http://jsfiddle.net/rE9zd/