将 OnClick 事件添加到大型 HTML 表中的输入元素会导致页面呈现缓慢.如何提高性能

adding onclick event to input element in large html table causes the page to render slow. how to improve the performace?

本文关键字：高性能 何提 缓慢 元素 添加 事件 OnClick 大型 HTML 输入      更新时间：2023-09-26

将onclick事件添加到大型HTML表格（大约2000行）中的输入元素（type=image）会导致页面呈现缓慢（在IE 9中）。 输入元素每行显示一次。 如果我删除 onclick，它会快速渲染。 OnClick 调用 JavaScript 函数。 有没有另一种方法来附加不会减慢渲染速度的事件？ javascrpt 函数位于包含在 head 中的.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>

使用事件委托，在这种情况下，这意味着向整个表添加一个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/

添加一个事件处理程序;

.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/

相关文章：