javascript for循環中的DispatchEvent

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

我的代碼，這是收到

Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.

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