表行上的Javascript事件侦听器多次激发

我用html和JS创建了一个表。当单击一行时，某些数据被捕获并发送到另一个函数。问题是clickableRow（）函数有一种奇怪的行为。第一次点击它什么也不做，第二次点击它会触发两次，第三次点击-三次，第五次，第六次等等，它会触发20-30次以上。 处理数据提取的罪魁祸首函数如下所示

function clickableRow(){
        const selectTr = document.querySelectorAll("tr");
        for(items of selectTr){
            items.addEventListener("click",e=>{
                var wholeRow = e.toElement.parentElement.innerText;
                var stringArray = wholeRow.split(/(\s+)/);
                var whichTable = e.path[4].id;
                if (stringArray[0].localeCompare("ServiceID") == 0 ||
                    stringArray[0].localeCompare("VisitID") == 0 ||
                    stringArray[0].localeCompare("Vehicle") == 0){
                    // do nothing. this is in case column header is clicked when sorting.
                } else {
                    sendDataToRightPane(stringArray[0], whichTable);
                }
            });
        }
    }

HTML表格代码：

<div id="checkServices" style="display:block">
        <table class="table table-striped">
            <tr class="bg-info" style="text-align: center">
                <th class="service" data-column="id" data-order="desc">ServiceID &#9660</th>
                <th class="service" data-column="visit.id" data-order="desc">VisitID &#9660</th>
                <th class="service" data-column="visit.vehicle.licensePlate" data-order="desc">License Plate &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair Order &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair Status &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair End Date &#9660</th>
            </tr>
            <tbody id="serviceOrdersTable">
            </tbody>
        </table>
        </div>

ServiceID▼
VisitID和#9660
车牌号▼
维修单▼
维修状态▼
维修结束日期▼

根据Ajax请求构建表的Javascript函数：

function buildServiceOrdersTable(data) {
        var table = document.getElementById('serviceOrdersTable')
        table.innerHTML = ''
        var text = "To Be Implemented"
        for (var i = 0; i < data.length; i++) {
            var row = `<tr onclick="clickableRow()">
                    <td>${data[i].id}</td>
                    <td>${data[i].visit.id}</td>
                    <td>${data[i].visit.vehicle.licensePlate}</td>
                    <td>${data[i].service.name}</td>
                    <td>${text}</td>
                    <td>${text}</td>
                    </tr>`
            table.innerHTML += row
        }
    }

函数buildServiceOrdersTable（数据）{
var table=document.getElementById（'serviceOrdersTable'）
table.innerHTML=“”
var text=“待实施”
对于（变量i=0；i

我不止一次地读过关于EventListener触发的多个线程，但没有一个线程像我一样处于循环中，因此我无法准确地指出错误可以从何处修复

---

任何帮助都将不胜感激！提前谢谢你

每次单击该行时，都会为该行添加一个新的事件处理程序。不要将古老的html事件（

onclick=

）与js事件（

.addEventListener

）混合使用。删除

onclick=

并在

buildServiceOrdersTable（）

的末尾添加

clickableRow（）

（或者不要在clickableRow中添加事件处理程序，因为它是事件处理程序）永远不要在html字符串中添加javascript

div.innerHTML=“感谢您的快速响应和其他信息。它工作得很好。我将进一步了解您写的关于EventHandler和onclick函数如何工作以及不能/不能共存的内容。再次感谢您！