Javascript 将单击事件处理程序绑定到海量的机制<；td>；元素

我正在写一个大的

HTML

表格，它具有相同的数据着色功能，用户双击某个单元格，表格有8000多个单元格，单元格将增加。 在这一点上，我认为这可能是一个沉重的负担工作的网络浏览器。 是的，我想知道将事件处理程序附加到大量

元素的深层机制和负担程度

守则：

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

var otable=document.getElementById（“htbl_drawresult”）；
var-irIndex=0；
var-icIndex=0；
var sintxt=“”；
对于（变量i=1；i对于（i=1；i如果您想添加click事件监听器，您可以使用jQuery。您可以将其用于任何HTML元素


$（“#按钮”）。单击（函数（）{
$（“#结果”）.css（“背景色”、“黄色”）；
});
$（“#按钮”）.dblclick（函数（）{
$（“#结果”）.css（“背景色”、“红色”）；
})；
正文{
字体系列：Arial，无衬线；
}
运输署{
宽度：20px；
高度：20px；
文本对齐：居中；
保证金：0；
边框：.5px纯黑色；
}
#钮扣{
背景色：白色；
}
#结果{
背景颜色：蓝色；
宽度：100px；
高度：100px；
}

如果单击
div
一次，正方形将变为黄色。

如果双击
div
，正方形将变为红色。

CM=单击我
1.
2.
3.
4.
5.
6.
7.
厘米
9
10
11
12
13
14
15
16
17
18
19
20
如果要为表中的单元格（
）分配事件处理程序，可以通过两种方式完成：

1.事件传播

一种较短且更简单的方法。您可以将事件处理程序分配给父元素（元素本身），其中的所有内容都将具有事件处理程序。简单地说，父元素得到的内容，子元素也会得到


如果您不需要在单击给定元素时发生特定事件，则建议使用此选项。不过，您可以通过使用来缩小范围
在下面的示例中，我为表（父表）指定了一个
单击
事件侦听器，因此当您单击其中的任何内容时，将显示一条警告，提示“您单击了一个单元格，它的值为[cell value]”

下面是一个事件传播的示例


window.onload=（）=>{
//拿我们的桌子
设tb=document.getElementById（'main-table'）；
//为其指定一个单击事件
tb.addEventListener（'单击'，（e）=>{
警报（`youclciked on a cell，其值为${e.target.innerHTML}`）
})
}

#
弗斯特
最后
手柄
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特
只是总结一下@的答案：

是的，在表的每个单元格上都附加一个事件是很麻烦的

但是，您可以以这样的方式构造HTML，即每个单元格（
TD
s）都可以唯一标识。当事件从一个目标传播到一个祖先（
TABLE
element，例如）时，如果一个侦听器是*通常*附加的，则很容易确定侦听器中的实际目标


document.addEventListener（“DOMContentLoaded”，main，false）；
函数main（）{
var table=document.getElementsByTagName（“表”）[0]；
表.addEventListener（“dblclick”，handleDoubleClickOnTable，false）；
}
函数handleDoubleClickOnTable（/*事件=>*/e）{
var目标=e.target；
var行、列；
变量行数、列数；
如果（“TD”！==target.tagName）{
返回；
}
行=target.parentNode；
列=目标；
rowNumber=row.dataset.rowNumber；
columnNumber=column.dataset.columnNumber；
警报（`您单击了（行[${rowNumber}]，列[${columnNumber}]）`）；
}
*{
字体系列：monospace；
框大小：边框框；
}
桌子{
宽度：100%；
边缘底部：1rem；
背景色：透明；
边界塌陷：塌陷；
}
运输署{
垂直对齐：底部对齐；
边框底部：2个实心#dee2e6；
边框顶部：1px实心#dee2e6；
填充：2rem；
}

( 1, 1 )
( 1, 2 )
( 1, 3 )
( 2, 1 )
( 2, 2 )
( 2, 3 )
( 3, 1 )
( 3, 2 )
( 3, 3 )
如果op没有提及，请不要建议jQuery回答。感谢您的深入重述，非常有用，谢谢：-）不客气：-）如果您觉得答案有用，那么您可以通过向上投票和/或接受它作为答案来表示。这样其他人可以从您的评估中受益。