Javascript動的にイベントとこのパラメータを持つeventListenerを作成

Question

最初の投稿は簡単です。

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

を私が取得エラー：

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

ジャバスクリプトは次のようになります。私は以下のondrop機能が と同じ効果がありますJavaScriptでのEventListenerを作成しようとしている

新しく作成された行のondropイベントによってdrop関数が呼び出されたときです。行番号

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

戻り値なし - ドラッグイベントが要素IDをドロップ関数に渡していないことを示唆しています。

すべての関数がhtmlから呼び出されています。新しく作成されたイベントハンドラによって呼び出された同じ関数が機能していません。

ありがとうございます。

Answer 1

イベント引数を明示的に渡す必要はありません。代わりに、以下のコード：

newRow.addEventListener('dragstart',drag); 

そして、drag（）関数は定義したのと同じになります。今

あなたが唯一のイベント引数を持つ必要があります定義されているドロップ（）関数：

function drop(ev) { 

} 

そして、あなたは現在のオブジェクトにアクセスするにはthisオブジェクトを使用することができます。だから、

コードの下に新しく追加された行の使用のためにドロップイベントリスナーを追加しながら：

newRow.addEventListener('drop',drop); 

はまた、HTMLマークアップの下に使用します。

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

・ホープ、このことができます。