[JavaScript] addEventListener 사용 함수 parameter 전달

click 등 이벤트가 발생했을 때 함수를 유발시킬 용도로 target.addEventListener 를 사용한다.

이때 parameter를 포함하는 함수를 전달하면 괄호가 포함되니까 화면이 열리자마자 바로 실행된다. 이벤트가 발생하지 않아도!

 

예를 들면 이런 식

const userValueDiv = document.getElementById("userValueDiv");

function setValue(id, label) {
let Input = document.getElementById(id).value;
userValueDiv.textContent = `${label}: ${Input}`;
}

// getName 버튼을 눌렀을 때 함수가 작동하게 하고 싶다
const getNameButton = document.getElementById("getName");

// 이렇게 작성하면 정상 작동 (클릭 이벤트 발생 시)
getNameButton.addEventListener("click", function () {
    let nameInput = document.getElementById("name").value;
    userValueDiv.textContent = `이름: ${nameInput}`;
});

// 이렇게 작성하면 이벤트 발생하지 않아도 setValue 함수 실행
getNameButton.addEventListener("click", setValue("name", "이름"));

 

 

그래서 addEventListener의 두 번째 인자로 parameter가 포함된 함수를 넣으려면 function() {} 안에 넣어 줘야 한다.

getNameButton.addEventListener("click", function () {
setValue("name", "이름");
});

 

 

parameter가 포함되지 않은 함수라면 괄호 없이 이름만 적어 주는 경우 정상적으로 이벤트 발생 시에만 함수가 작동한다

 function test() {
    console.log("?");
  }

// 이렇게 하면 정상 작동
getNameButton.addEventListener("click", test);

  

바닐라js 써버릇한 적이 없어서 매일 헷갈린다 🫠