0

将 onclick 事件添加到大型 html 表（大约 2000 行）中的输入元素（类型=图像）会导致页面呈现缓慢（在 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>
4

2 回答 2

2

使用事件委托，在这种情况下，这意味着将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/

于 2013-10-31T14:19:37.067 回答
0

只添加一个事件处理程序；

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/

于 2013-10-31T14:21:40.047 回答