[addEventListener] 콜백함수에게 인자를 주는 방법
EventTarget.addEventListener()
target.addEventListener(type, listener[, options]);소개
-
EventTarget의 메서드이다.
-
주어진 이벤트 유형에, EventListener를 구현한 함수를 이벤트 처리기 목록에 추가해 작동한다.
-
EventTarget은 보통 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다.
매개변수
- type
- 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열. ex) 'click'
- 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