Javascript動態創建帶有事件和這個參數的eventListener

1st post - go easy。Javascript動態創建帶有事件和這個參數的eventListener

我想在JavaScript中創建事件監聽具有作爲同樣的效果下ondrop功能：

<tr 
    id=rw01 
    draggable=true 
    ondragstart=drag(event); 
    ondrop=drop(event,this); 
>some HTML</tr>

的JavaScript看起來像這樣：

function drag(ev) { 
    ev.dataTransfer.setData('id', ev.target.id); 
} 

function drop(ev,r) { 
    ev.preventDefault(); 
    var oldRowID = ev.dataTransfer.getData('id'); 
    var newRowNo = r.rowIndex; 
    var tbl = document.getElementById('main'); 
    newRow = tbl.insertRow(newRowNo); 
    oldRow = document.getElementById(oldRowID); 
    newRow.innerHTML = oldRow.innerHTML; 
    newRow.id = oldRowID; 
    newRow.draggable = true; 
    newRow.addEventListener('dragstart',drag(event)); 
    newRow.addEventListener('drop', function() { 
      drop(event,newRow); 
     }); 
    oldRowNo = oldRow.rowIndex; 
    tbl.deleteRow(oldRowNo); 
}

我得到的錯誤是在新創建的行上通過ondrop事件調用drop函數的時候。該行

var oldRowID = ev.dataTransfer.getData('id')

什麼也沒有返回 - 表明拖動事件沒有將元素id傳遞給放置函數。

從html調用的所有函數都正常工作 - 新創建的事件處理程序調用的相同函數不起作用。

在此先感謝。

來源

2016-05-16 Gaz

您不需要顯式傳遞事件參數。取而代之的是下面的代碼：

newRow.addEventListener('dragstart',drag);

並且drag（）函數將與您定義的相同。

現在，您已經定義應該只有事件參數的下降（）函數：

function drop(ev) { 

}

你也可以使用this對象來訪問當前對象。

因此，儘管增加了對下面的代碼新添加的行使用drop事件監聽器：

newRow.addEventListener('drop',drop);

還可以使用下面的HTML標記：

<tr 
    id=rw01 
    draggable=true 
    ondragstart=drag(); 
    ondrop=drop(); 
>some HTML</tr>

希望這有助於。

來源

2016-05-16 07:25:16 ShwethaU

謝謝@ShwethaU我讓聽衆在插入的行上工作。但是我無法弄清楚如何獲取已拖動對象的元素的id。 drop（）函數觸發，但該函數需要接收的id。簡而言之，哪些元素在標記中觸發了drop函數，我傳遞了'this'來獲取該信息。據我所知，'function drop（ev）{'現在不需要ev了。 – Gaz

更新。所有固定的感謝堆。我使用了'event.target.parentElement.id'，儘管'parentElement'只是必要的，因爲我在上放棄了，我想要父母的ID爲 – Gaz

Javascript動態創建帶有事件和這個參數的eventListener

回答

相關問題