將onclick事件添加到大型html表中的輸入元素會導致頁面呈現緩慢。 如何提高性能？

Question

將onclick事件添加到大型html表（大約2000行）中的輸入元素（type = image）會導致頁面呈現緩慢（在IE 9中）。 輸入元素每行出現一次。 如果我刪除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

只添加一個事件處理程序;

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/