Question

我创建了一个事件，以便我可以在事件发生时添加侦听器。将有不同的场景触发事件，因此将跟踪触发事件的内容并适当地处理它。但是，我尝试在循环内发生的函数中添加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：无法执行＆＃39; dispatchEvent＆＃39; on＆＃39; EventTarget＆＃39;：事件已经被派遣。

Answer 1

大概你需要改变：

table.dispatchEvent(event);

到

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

Answer 2

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

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

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

 table.dispatchEvent(event);

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

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

Answer 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]);
    }
}

在javascript for循环中的DispatchEvent

3 个答案: