0

onclick イベントを大きな html テーブル (約 2000 行) の入力要素 (type=image) に追加すると、ページのレンダリングが遅くなります (IE 9 の場合)。入力要素は各行に 1 回表示されます。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

イベントハンドラを 1 つだけ追加します。

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 に答える