Javascript 将EventListener添加到指定的html表列事件传播/委派

我有一个包含10列的表，我想使用

addEventListener

语句将一个或多个事件侦听器添加到第5列到第8列（因此请不要使用类似

element.onclick的内联事件）。
该表是动态的，事实上，我不知道在编程时该表在运行时会有多少条记录，因为它只会在那个时刻由数据填充

我已经知道如何“瞄准”一个表、一个表行或一个指定的表单元格，以便向它们添加事件侦听器，但不幸的是，我不知道如何将它们一次添加到某些列或一系列列（“一次”指的是一个for循环，该循环通过每一行来获得每个行所需的单元格）

编辑
该表只是一个普通的表，如下面的示例所示，它是通过从csv文件加载数据记录或通过放置在表本身的tfoot中的表单添加新记录来填充的。此外，由于js在需要时动态添加（或删除）了
contenteditable
属性，因此可以将数据编辑到表中

如果我想将事件侦听器添加到行中，我首先获取行对象，然后将eventlistener添加到行中一次：由于事件传播/委派，所有td元素都会受到影响。对列也可以这样做吗？

myRow.addEventListener(input, myfunc, false);

换言之，是否可以执行以下操作：

myCol5.addEventListener(input, myfunc, false);
myCol6.addEventListener(mouseover, myfunc, false);
myCol7.addEventListener(click, myfunc, false);
myCol8.addEventListener(input, myfunc, false);


表格，td，th
{
边框：1px纯黑；
边界塌陷：塌陷；
}

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
使用用户关于添加类的想法，您可以使用事件委派来侦听表单元格上符合列要求的事件


//有点像jQuery的.closest
const findClosest=（元素、选择器、上下文）=>{
context=context | | element.document | | element.ownerDocument
while（元素！==上下文）{
if（元素匹配（选择器））{
返回元素
}
element=element.parentNode
}
返回空
}
document.querySelector（'table>tbody'）。addEventListener（'click'，函数（e）{
const td=findClosest（例如，target'td.handleClick'，this）
如果（td）{
log（'点击'，td）
}
}，false）

一个
两个
三
一个
两个
三
在某些用例中，您可以使用事件委派，然后迭代TR的子项以查找列的索引，从那里您可以轻松触发特定于每个列的函数，并且当它委派给表时，任何动态创建的单元格都将准备好事件侦听器

对于简单的表来说，这很好，但如果涉及行跨度，则可能不起作用-对于这样的表，类或属性可能是更好的选择


document.getElementById（'myTable'）.addEventListener（'click'，函数（e）{
var elem=e.目标；
var tr=closestTag（elem，“tr”）；//查找单击了哪个tr
var td=（elem.tagName==“td”）？elem:closestTag（elem，“td”）；//查找单击的td
如果（tr&td）{
var column=TdIndex（e.target，tr）；//找出单击了哪个列
日志（“单击列”，列）；
}
});
函数closestTag（elem，tag）{//向上移动DOM树，直到找到| |
while（elem.parentNode.tagName！=标记和elem.tagName！=主体）{
elem=elem.parentNode；
}
返回（elem.tagName=='BODY'）？false:elem.parentNode；
}
函数TdIndex（elem，tr）{//返回tr中包含的TD的索引
for（var i=0；i


单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
使用
window.event.target.cellIndex
可以获取作为列索引的已单击单元格的单元格索引（从0到n，其中n是表列数-1）

使用
window.event.target.parentNode.rowIndex
可以获取作为行/记录索引的已单击单元格的行索引（从0到n，其中n是表行数-1）

例子：
工作示例：

document.getElementById（'myTbl'）.addEventListener（'click'，function（）{myFunction（event）}，false）；
函数myFunction（）
{
var col=window.event.target.cellIndex；
var row=window.event.target.parentNode.rowIndex；
警报（'列索引为：'+Col+'\n行索引为：'+row）；
//在这一点上，可以很容易地执行以下操作：
//如果（列数>5和列数<8）
{
//执行这些东西
}
}
表格，td{
边框：1px纯黑；
}
单击每个td元素以提醒其在表行中的位置

单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
单击以显示cellIndex
Yo的可能重复
  var col = window.event.target.cellIndex;
  var row = window.event.target.parentNode.rowIndex;