javascript for 循环中的 DispatchEvent答案

【问题标题】：DispatchEvent in javascript for loopjavascript for 循环中的 DispatchEvent
【发布时间】：2017-04-18 01:38:02
【问题描述】：

我创建了一个事件，以便在事件发生时添加侦听器。将有不同的场景触发事件，因此将跟踪触发事件的原因并适当地处理它。但是，我尝试在循环中发生的函数中添加 dispatchEvent 并且收到 InvalidState 错误。任何人都想解释导致此错误的原因以及为什么会在这里发生。你可以在下面看到我的代码

//create event
var event = new Event('tableRowAdded');

//get element reference
var table = document.getElementById('dataTable');

//set model
var model = [{jsonData},{jsonData},{jsonData}];

//validate model and then start creating table
function addRowsToTable(DOMTable, rowData){
    //stop execution if rowdata null
    if(rowData == null || DOMTable == null){
        return;
    }

    var currentRowCount = DOMTable.rows.length;

    //add empty row to table
    var tr = DOMTable.insertRow(currentRowCount);
    tr.id = "data_row_" + currentRowCount;

    //add columns to table
    //first cell is used for error data
    var td = tr.insertCell(0);

    //traineeCode
    td = tr.insertCell(1);
    td.innerHTML = rowData.TRAINEE_CODE; //this is one of the json keys within the json data
}

function populateTableFromJSON(){
    var count = model.length;

    //loop over json array to populate table
    for(i = 0; i < count; i++){
        addRowsToTable(table, model[i]);
        //dispatch event occured
        table.dispatchEvent(event);
    }
}

这是收到的错误

未捕获的 InvalidStateError：无法在“EventTarget”上执行“dispatchEvent”：该事件已被调度。

【问题讨论】：

创建一个完整但最小的示例。您的演示尚未完成。

标签： javascript html

【解决方案1】：

大概你需要改变：

table.dispatchEvent(event);

到

table.dispatchEvent(new Event('tableRowAdded'));

【讨论】：

【解决方案2】：

您发布的示例非常混乱。您正在调用一个执行对象验证的方法：

if(rowData == null || DOMTable == null){
    return;
}

但与此同时，您忽略了尝试在下一行发送事件的验证：

 table.dispatchEvent(event);

javascript 中的事件对象在调度后会更改一些属性，这是因为事件应该在多个阶段反映其当前状态。尝试这样调用：

table.dispatchEvent(new Event('tableRowAdded'));

【讨论】：

【解决方案3】：

我知道这个问题有点过时，但我想我至少会回答它，以防其他人偶然发现这篇文章。

您收到错误的原因是因为您试图一遍又一遍地将事件分派到同一个对象（表）。尝试将其分派到每一行。

编辑：这是您修改的代码。我将调度移到添加行的循环中，并向表中添加了一个事件侦听器。

//create event
var event = new Event('tableRowAdded');

//get table
var table = document.getElementById('dataTable');
// set event listener
table.addEventListener("tableRowAdded", function(e) {
  handler code
});

//set model
var model = [{jsonData},{jsonData},{jsonData}];

//validate model and then start creating table
function addRowsToTable(DOMTable, rowData){
    //stop execution if rowdata null
    if(rowData == null || DOMTable == null){
        return;
    }

    var currentRowCount = DOMTable.rows.length;

    //add empty row to table
    var tr = DOMTable.insertRow(currentRowCount);
    tr.id = "data_row_" + currentRowCount;

    //add columns to table
    //first cell is used for error data
    var td = tr.insertCell(0);

    //traineeCode
    td = tr.insertCell(1);
    td.innerHTML = rowData.TRAINEE_CODE; //this is one of the json keys within the json data

  // dispatch event
    tr.dispatchEvent(event);
}

function populateTableFromJSON(){
    var count = model.length;

    //loop over json array to populate table
    for(i = 0; i < count; i++){
        addRowsToTable(table, model[i]);
    }
}

【讨论】：