javascript - 如何将参数传递给事件监听器中的函数

Question

我正在应对一个挑战，我对 JS 很陌生，坦白说我并不完全理解这个挑战。要进入下一阶段，我需要回答的问题是:

Step 2 Create the following 3 functions:

a displayBirthdate arrow function a displayPhone arrow function and a displayAddress arrow function These functions will be called by event listeners attached to buttons in the UI.

Step 3 Create a displayExtraUserInfo arrow function. It should take in a single parameter. It should then :

Add a click listener to the BUTTON with id of btn-birthdate. The listener should make a call to displayBirthdate and pass in the parameter displayExtraUserInfo received

Add a click listener to the BUTTON with id of btn-phone. The listener should make a call to displayPhone and pass in the parameter displayExtraUserInfo received

Add a click listener to the BUTTON with id of btn-address. The listener should make a call to displayAddress and pass in the parameter displayExtraUserInfo received

For the next 3 steps, be sure you have covered Step 1 above, then review https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6 for a primer on ES6 destructuring

Step 4 Locate the displayBirthdate function you initially defined, which took no parameter. Modify it to use object de-structuring to get just the dob property of the parameter object it will receive.

Step 5 Like in step 4, locate the displayAddress function and de-structure its parameter to get just the location property

Step 6 Like in step 4, locate the displayPhone function and de-structure its parameter to get just the phone and cell properties

这是我的代码:

var displayBirthdate = ({dob = 'DOB'}) => {};
var displayPhone = ({location = 'location'}) => {};
var displayAddress = ({phone = 'phone', cell='cell'}) =>{};

var displayExtraUserInfo = (params) => { 
      document.getElementById("btn-birthdate").addEventListener("click", function(){ displayBirthdate(params)});
      }

但是我的理解不太对，是不是我的逻辑有问题？或代码？我不知道我做错了什么。

Answer 1

我从你的问题中得到的是，你想在点击时调用 displayBirthdate ，并希望将 displayExtraUserInfo 中传递的 params 传递给 显示出生日期

var displayBirthdate = (params) => (console.log(params));
var displayPhone = ({location = 'location'}) => ({});
var displayAddress = ({phone = 'phone', cell='cell'}) =>({});

var displayExtraUserInfo = (params) => { 
      document.getElementById("btn-birthdate").addEventListener("click",
         function(){
             displayBirthdate(params)
         });
 }

displayExtraUserInfo('some data')

<button id="btn-birthdate">click me</button>