將參數傳遞給回調函數

Question

觸發eventListener時如何將參數傳遞給箭頭函數？

// Name of certificate
let certificateName = document.querySelector('.js--c-name').value;

// Call upload function
currentFileInput.addEventListener('change', fileUpload , false);

const fileUpload = (certificateName) = (evt) => {
  // Here I need the parameter certificateName for testing
  console.log(`Name of Certificate: #{certificateName}`);

  // Function stuff...
  let myFile = evt.target.files[0],
      maxFileSize = evt.target.getAttribute('data-fileSizeMax');

  // Check filesize
  if(myFile.size <= maxFileSize){
   // etc.
  }

}

Answer 1

使您的fileUpload返回內部函數

const fileUpload = (certificateName) => (evt) => {

  console.log(`Name of Certificate: #{certificateName}`);

  let myFile = evt.target.files[0],
      maxFileSize = evt.target.getAttribute('data-fileSizeMax');

  if(myFile.size <= maxFileSize){
   // etc.
  }

}

您需要調用fileUpload函數並傳遞certificateName 。

currentFileInput.addEventListener('change', fileUpload(certificateName), false);

Answer 2

您需要將函數調用包裝在另一個函數中

let certificateName = document.querySelector('.js--c-name').value;

currentFileInput.addEventListener('change', function(e){
  fileUpload(e, certificateName ); //observe changes in this line
}, false);

const fileUpload = (evt, certificateName) => { //pass the arguments 
  //rest of your code as is    
}