Javascript Dynamisch Erstellen eines EventListener mit Ereignis und diese Parameter

Question

1. Post - gehen Sie einfach.

Ich versuche, ein eventlistener in Javascript zu erstellen, die die gleiche Wirkung wie Die ondrop Funktion unten:

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

Die Javascript wie folgt aussieht:

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

Der Fehler, den ich bekommen ist, wenn die Drop-Funktion durch das Ondrop-Ereignis in der neu erstellten Zeile aufgerufen wird. Die Zeile

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

gibt nichts zurück - was darauf hindeutet, dass das Ziehereignis die Element-ID nicht an die Drop-Funktion weitergibt.

Alle Funktionen, die aus dem HTML aufgerufen werden, funktionieren einwandfrei - die gleichen Funktionen, die von den neu erstellten Ereignishandlern aufgerufen werden, funktionieren nicht.

Vielen Dank im Voraus.

Answer 1

Sie müssen das Ereignisargument nicht explizit übergeben. Stattdessen nur den folgenden Code:

newRow.addEventListener('dragstart',drag); 

Und die Drag() -Funktion wird gleich sein wie Sie definiert.

Nun ist die Drop() Funktion, die Sie definiert haben, nur das Ereignis Argument haben sollte:

function drop(ev) { 

} 

Und Sie this Objekt verwenden, können das aktuelle Objekt zuzugreifen.

So, während der Drop-Ereignis-Listener Verwendung unter Code für neu hinzugefügte Zeile hinzufügen:

newRow.addEventListener('drop',drop); 

auch unter HTML-Markup verwenden:

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

Hoffnung, das hilft.