eventListener内で親関数の引数を使用する方法は？

Question

基本的に、この関数は、ユーザーがプリンタを追加したり、現在のプリンタを編集したいときにモーダルを開きます。プリンタは、さまざまな特性を備えたテーブルに配置されています。

openmodal関数の行パラメータは、イベントが発生した行です。しかし、私がedit eventListenerの中でこの行にアクセスしようとすると、人が行の編集を選択したときに起動され、編集された最初の行にしかアクセスしません。

eventListenerで正しい行を使用するにはどうすればよいですか？

function openmodal(option, row) { 
    backdropModal.style.display = "block"; 
    modal.style.display = "block"; 
    if (option === 'add-new') { 
     edit.style.display = 'none'; 
    } 
    edit.addEventListener('click', function (event) { 
     var editedPrinter = new Printer(
      document.getElementById('post-brand-input').value, 
      document.getElementById('post-type-input').value, 
      document.getElementById('post-code-input').value, 
      document.getElementById('post-color-input').value, 
      document.getElementById('post-quantity-input').value, 
      document.getElementById('post-updated-input').value, 
      document.getElementById('post-name-input').value, 
      document.getElementById('post-location-input').value, 
      document.getElementById('post-notes-input').value, 
      document.getElementById('post-min-quantity-warning').value 
     ); 


     while (row.firstChild) { 
      row.removeChild(row.firstChild); 
     } 

     addPrinter(row, editedPrinter); 
     event.stopImmediatePropagation(); 
    }); 
    addNew.addEventListener('click', addNewPrinter); 
} 

Answer 1

たぶん、あなたはこれをしたい：

addNew.addEventListener('click', function(evtObj){ 
    addNewPrinter.call(this, evtObj, argument1, argument2); 
}); 

Answer 2

あなたはopenmodal内のイベントリスナーを追加するべきではありません。モーダルを開くたびに、要素に新しいリスナーが追加されますが、古いリスナーはまだそこにあるので、すべて実行されます。

リスナーを一度追加する必要があります。 openmodal()は、選択された行がリスナーに通知されるグローバル変数を設定できます。

var selectedRow; 

function openmodal(option, row) { 
    backdropModal.style.display = "block"; 
    modal.style.display = "block"; 
    if (option === 'add-new') { 
     edit.style.display = 'none'; 
    } 
    selectedRow = row; 
} 

edit.addEventListener('click', function (event) { 
    var editedPrinter = new Printer(
     document.getElementById('post-brand-input').value, 
     document.getElementById('post-type-input').value, 
     document.getElementById('post-code-input').value, 
     document.getElementById('post-color-input').value, 
     document.getElementById('post-quantity-input').value, 
     document.getElementById('post-updated-input').value, 
     document.getElementById('post-name-input').value, 
     document.getElementById('post-location-input').value, 
     document.getElementById('post-notes-input').value, 
     document.getElementById('post-min-quantity-warning').value 
    ); 

    while (selectedRow.firstChild) { 
     selectedRow.removeChild(selectedRow.firstChild); 
    } 

    addPrinter(selectedRow, editedPrinter); 
    event.stopImmediatePropagation(); 
}); 
addNew.addEventListener('click', addNewPrinter);