html 个々の元でイベント处理するか,亲の元でまとめて处理するかの比较

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 个々の元でイベント处理するか,亲の元でまとめて处理するかの比较相关的知识,希望对你有一定的参考价值。

参考
- http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0005?page=2


- 最初に createElement(), appendChild() で table の中身を作る部分で1,2秒かかっていた
- 片方は onmouseover, onmouseout を tr 毎にやっているけど、明かにそっちの方が遅い
- event handler は、クロージャではないので、同じものをそれぞれのtrに付ける事ができる、そうすると多少速くなった。つまり Function の生成コストがある程度ある。
- 色を変えるイベント処理そのものが遅いという事はなかった
- など考えられるけど、一番遅いと思われるのは、ログが出た後の tr,td の描画処理の様に思える。この部分は HTML で書いても避けられない
<!DOCTYPE html>
<html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>table の 各 tbody だけに event handler を付けて、その中で target の tr を特定する場合</title>
      <style type="text/css">
       #table{
         width:100%;
         border-collapse:collapse;
       }
       #table td{ border:1px solid #999; }
      </style>
    </head>
    <body>
      <h1>table の 各 tbody だけに event handler を付けて、その中で target の tr を特定する場合</h1>
      <table id="table"><tbody id="tbody"></tbody></table>
      <script>
       function with_elapsed_time_log(tag,f){
         var r;
         try {
           console.time(tag);
           r = f();
         } finally {
           console.timeEnd(tag);
         }
         return r;
       }

       with_elapsed_time_log('setup-table',function(){
         var tbody = document.getElementById('tbody');
         for (var i = 0; i<100000; i++){
           var tr = document.createElement('tr');
           for (j=0; j<3; j++){
             var td = document.createElement('td');
             td.appendChild(document.createTextNode(i));
             tr.appendChild(td);
           }
           tbody.appendChild(tr);
         }});
       with_elapsed_time_log('setup-tbody-handlers',function(){
         var tbody = document.getElementById('tbody');
         tbody.onmouseover = function(ev){
           if (!ev) ev = window.event;
           for (var target = ev.target || ev.srcElement;
             target && target !== tbody;
             target = target.parentNode) {
	       if (target && target.tagName === 'TR')
                 target.style.backgroundColor = '#c88';
	   }}
         tbody.onmouseout = function(ev){
           if (!ev) ev = window.event;
           for (var target = ev.target || ev.srcElement;
             target && target !== tbody;
             target = target.parentNode) {
	       if (target && target.tagName === 'TR')
                 target.style.backgroundColor = '#fff';
	   }}});
      </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>table の 各 tr に event handler を付けた場合(その2)</title>
      <style type="text/css">
       #table{
         width:100%;
         border-collapse:collapse;
       }
       #table td{ border:1px solid #999; }
       #table tr.hover{ background-color:#c88; }
      </style>
    </head>
    <body>
      <h1>table の 各 tr に event handler を付けた場合(その2)</h1>
      イベントハンドラは1つにして、これを複数の tr に付ける様にした。
      <table id="table"><tbody id="tbody"></tbody></table>
      <script>
       function with_elapsed_time_log(tag,f){
         var r;
         try {
           console.time(tag);
           r = f();
         } finally {
           console.timeEnd(tag);
         }
         return r;
       }

       var onmouseover = function(){ this.className = 'hover'; }
       var onmouseout  = function(){ this.className = ''; }
       with_elapsed_time_log('setup-table',function(){
         var tbody = document.getElementById('tbody');
         for (var i = 0; i<100000; i++){
           var tr = document.createElement('tr');
           tr.onmouseover = onmouseover;
           tr.onmouseout  = onmouseout;
           for (j=0; j<3; j++){
             var td = document.createElement('td');
             td.appendChild(document.createTextNode(i));
             tr.appendChild(td);
           }
           tbody.appendChild(tr);
         }});
      </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>table の 各 tr に event handler を付けた場合</title>
      <style type="text/css">
       #table{
         width:100%;
         border-collapse:collapse;
       }
       #table td{ border:1px solid #999; }
       #table tr.hover{ background-color:#c88; }
      </style>
    </head>
    <body>
      <h1>table の 各 tr に event handler を付けた場合</h1>
      <table id="table"><tbody id="tbody"></tbody></table>
      <script>
       function with_elapsed_time_log(tag,f){
         var r;
         try {
           console.time(tag);
           r = f();
         } finally {
           console.timeEnd(tag);
         }
         return r;
       }

       with_elapsed_time_log('setup-table',function(){
         var tbody = document.getElementById('tbody');
         for (var i = 0; i<100000; i++){
           var tr = document.createElement('tr');
           tr.onmouseover = function(){ this.className = 'hover'; }
           tr.onmouseout  = function(){ this.className = ''; }
           for (j=0; j<3; j++){
             var td = document.createElement('td');
             td.appendChild(document.createTextNode(i));
             tr.appendChild(td);
           }
           tbody.appendChild(tr);
         }});
      </script>
    </body>
</html>

以上是关于html 个々の元でイベント处理するか,亲の元でまとめて处理するかの比较的主要内容,如果未能解决你的问题,请参考以下文章

html Vue.jsでコンポーネントのイベント名をキャメルケースにすると反応しない

html イベント处理顺を视覚的に确认

html 复数登录されたイベントリスナを中断

text イベント修饰子

javascript ロードイベント

markdown 独自イベント