[addEventListener] 콜백함수에게 인자를 주는 방법

EventTarget.addEventListener()

target.addEventListener(type, listener[, options]);

소개

1. EventTarget의 메서드이다.

2. 주어진 이벤트 유형에, EventListener를 구현한 함수를 이벤트 처리기 목록에 추가해 작동한다.

3. EventTarget은 보통 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다.

매개변수

1) type

- 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열. ex) 'click'

 

2) listener

- 지정된 타입의 이벤트가 발생했을 때, callback함수가 작동한다.

- 콜백함수의 첫 번째 인자는 '이벤트 객체'로 미리 정의 되어 있다.

- 이름으로는 e, event로 많이 사용한다.

 

 

이벤트 객체(e)

e.target 과 같이 이벤트 객체를 참조하고 싶은 경우 아래를 사용한다.

target.addEventListener('click',(e)=>{
    console.log(e);
    console.log('callback test');
}); 

 

 

사용 예시) 1. 함수 안에서 이벤트리스너 등록

버튼을 누르면 버튼들이 보이도록, 그리고 그 버튼들은 eventListener속성을 갖도록 한다.

<button type="button">Button Appear</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

const divs =[ ...document.getElementsByTagName('div')] 
const appearBtn = document.getElementsByTagName('button')[0];
appearBtn.addEventListener('click',makeBtn)

function makeBtn(){ 
    divs.forEach(elem => {
        const btn = document.createElement('button');
        btn.textContent = 'Example' ;
        btn.addEventListener('click',(e)=>{
            console.log('callback test');
        })
        elem.appendChild(btn);
    });
}

 

 

사용 예시) 2. 콜백함수에 값을 전달하고 싶을 때(익명함수)

const edit = document.createElement('button');
edit.addEventListener('click',() => editComment(user_id,comment_id)); 

const remove = document.createElement('button');
remove.addEventListener('click',()=> removeComment(user_id,comment_id));

콜백함수에 값을 전달하기 위해 익명함수를 만들고, 그 안에서 지역변수를 인자로 받은 함수를 실행시킨다.

클릭 이벤트가 발생했을 때, 익명 화살표 함수가 실행되면서 익명함수 안에있는 코드도 같이 실행되기 때문에 원하는 결과를 얻을 수 있다.

 

 

사용 예시) 3. 콜백함수에 값을 전달하고 싶을 때(클로저)

const edit = document.createElement('button');
edit.addEventListener('click',editComment(user_id,comment_id)); 

function editComment(user_id,comment_id) { 
	return async function(){
  ... 
  try {
    await axios.patch(`/comments/${comment_id}`, { comment: newComment });
    ... 
  } catch (err) {
    console.error(err);
  }
}}

- 함수 실행형태를 인자로 넘기고, 실행하는 함수에서 내부함수를 반환하는 형식이다.

- 함수를 반환하니 콜백함수를 전달한 것이나 다름없다.

- editComment(user_id,comment_id) 를 실행하고 반환값인 async function(){..} 이 콜백함수로 등록된다.

 

정리) 콜백함수는 실행 가능한 함수 형태로 넘겨주는 것이지, 실행시킨 형태를 전달하는것은 아니다.

document
    .querySelector('.classBtn')
    .addEventListener('click', addScript('class'));

- 위와 같은 코드는 클릭 이벤트가 발생했을 때 실행되는 것이 아니라, 자바스크립트가 코드를 한줄 한줄 읽으면서 즉시 실행해버린다.

- 클릭시 콜백함수로 동작하지 않고 애시당초에 콜백함수도 아니다. 함수를 실행시킨 형태기 때문이다.

 

 

 

 

Reference

1. https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener