將點擊事件處理程序綁定到大量機制的機制 <td> 元素

Question

我正在編寫一個大的HTML表，該表具有相同的數據着色功能，方法是用戶雙擊某個單元格，該表有8000多個單元格，並且單元格將增加。 在這一點上，我認為網絡瀏覽器的工作負擔可能很大。 是的，我想知道將事件處理程序附加到大量<td>元素的深入機制和負擔程度。

編碼：

<script>
   var otable = document.getElementById("htbl_drawresult");
   var irIndex = 0;
   var icIndex = 0;
   var sintxt = "";

    for(var i = 1; i < otable.rows.length; i++)
    {
        for(var j = 0; j < otable.rows[i].cells.length; j++)
        {
            otable.rows[i].cells[j].ondblclick = function()
            {
                irIndex = this.parentElement.rowIndex;
                icIndex = this.cellIndex+1;
                sintxt = this.innerText;                    
                f_colorcell(sintxt, otable);
            };
        }
    }

    function f_colorcell(stxt, otbl){
        var irow = otbl.rows.length;
        var icol = otbl.rows[1].cells.length;
        var i,j=0;

        for(i=1; i<irow; i++)
        {
            for(j=0; j<icol; j++)
            {
               if (otbl.rows[i].cells[j].innerText == stxt){
                   otbl.rows[i].cells[j].style.background=\"red\";
               }
            }
        }
    }        
</script>

Answer 1

如果要為表中的單元格（ <td> ）分配事件處理程序，則可以通過兩種方式進行：

1.事件傳播

• 一種更短，更簡單的方法。 您可以將事件處理程序分配給父級（ <table>元素本身），其中的所有內容也將具有事件處理程序。 簡而言之，父母得到的，孩子也將得到。

  • 如果您不需要在單擊給定元素時發生特定的事情，則推薦使用此方法。 雖然，您始終可以利用Event.Target縮小范圍 。
  • 在下面的示例中，我為表（父級）分配了一個click事件偵聽器，這樣，當您單擊表中的任何內容時，都會顯示一條警告：“您單擊了某個單元格，並且它的值為[cell value]”。上

  • 這是事件傳播的有效示例 。

  •  window.onload = ()=>{ // get our table let tb = document.getElementById('main-table'); // assign a click event to it tb.addEventListener('click', (e)=>{ alert(`You clciked on a cell and it had the value of ${e.target.innerHTML}`) }) } 

     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <table class="table" id="main-table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> 

2.手動為每個元素分配一個特定的事件處理程序

• 您始終可以通過使用JavaScript的內置函數（即querySelector ， querySelectorAll ， getElementById等）抓取每個單元格（ <td> ）來設置事件處理程序，然后使用以下方法分配要在特定事件上調用的函數addEventListener

  • 不建議將其用於大量元素。

  • 你可以玩弄下面的代碼片段在這里 :)

  •  window.onload = ()=>{ // get our table let table = document.getElementById('main-table'); // get all the cells in the table element above let tableCells = table.querySelectorAll('td'); // assign an event listener to each cell <td> element inside that table specifically for(let i = 0; i < tableCells.length; i++){ tableCells[i].addEventListener('click', function(e){ alert(`You clicked on cell index ${i} and it had the value of ${this.innerHTML}`); }) } } 

     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <table class="table" id="main-table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> 

:)

Answer 2

總結一下@ C.RaysOfTheSun的答案：

是的，在表的每個單元格上附加一個事件會很麻煩 。

但是，您可以通過這樣的方式來構造HTML，使得每個單元格（ TD ）都可以唯一地標識。 當事件從目標傳播到祖先（例如，一個TABLE元素）（ 通常是附加了一個偵聽器）時，確定偵聽器中的實際目標很簡單。

 document.addEventListener("DOMContentLoaded", main, false); function main() { var table = document.getElementsByTagName("TABLE")[0]; table.addEventListener("dblclick", handleDoubleClickOnTable, false); } function handleDoubleClickOnTable( /* event => */ e) { var target = e.target; var row, column; var rowNumber, columnNumber; if ("TD" !== target.tagName) { return; } row = target.parentNode; column = target; rowNumber = row.dataset.rowNumber; columnNumber = column.dataset.columnNumber; alert(`You clicked on ( row[ ${ rowNumber } ], column[ ${ columnNumber } ] )`); } 

 * { font-family: monospace; box-sizing: border-box; } table { width: 100%; margin-bottom: 1rem; background-color: transparent; border-collapse: collapse; } td { vertical-align: bottom; border-bottom: 2px solid #dee2e6; border-top: 1px solid #dee2e6; padding: 2rem; } 

 <!-- Sample 3 x 3 table --> <table> <tr data-row-number="1"> <td data-column-number="1">( 1, 1 )</td> <td data-column-number="2">( 1, 2 )</td> <td data-column-number="3">( 1, 3 )</td> </tr> <tr data-row-number="2"> <td data-column-number="1">( 2, 1 )</td> <td data-column-number="2">( 2, 2 )</td> <td data-column-number="3">( 2, 3 )</td> </tr> <tr data-row-number="3"> <td data-column-number="1">( 3, 1 )</td> <td data-column-number="2">( 3, 2 )</td> <td data-column-number="3">( 3, 3 )</td> </tr> </table> 

Answer 3

如果要添加單擊事件偵聽器，則可以使用jQuery。 您可以將其用於任何HTML元素。

 $("#button").click(function() { $("#result").css("background-color", "yellow"); }); $("#button").dblclick(function() { $("#result").css("background-color", "red"); }); 

 body { font-family: Arial, sans-serif; } td { width: 20px; height: 20px; text-align: center; margin: 0; border: .5px solid black; } #button { background-color: white; } #result { background-color: blue; width: 100px; height: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> If you click the <code>div</code> once, the square will turn yellow.<br> If you double click the <code>div</code>, the square will turn red.<br> CM = Click Me <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td id="button">CM</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> </tr> </table> <div id="result"></div>