1. onclick과 addEventListener 비교

1) 이벤트핸들러 함수 생성 문법

• onclick

const eventTarget = document.getElementById('trigger')

eventTarget.onclick = () => {
    alert('hello!');
}

• addEventListener

const eventTarget = document.getElementById('trigger')

eventTarget.addEventListener('click',()=>{
    alert('hello!');
});

2) ⭐왜 addEventListener로 작성하는 방식이 모던할까?

출처 블로그

(1) 여러 개의 이벤트를 걸 수 있다.

• onclick 으로 작성한 경우, 해당이벤트에 대한 핸들러함수를 하나만 지정할 수 있다.
• 만약 이전에 동일한 이벤트를 지정했을 경우, 이전 이벤트는 없어짐

let obj = document.getElementById('trigger');
let do1 = () => {
    alert("do1");
};
let do2 = () => {
    alert("do2");
};
obj.onclick = do1;  // do1은 작동하지 않는다.
obj.onclick = do2;  

"click"에 대해 하나의 이벤트만 지정 가능

(2) 함수를 작성하는 중에 bubbling / capturing을 설정할 수 있다.

• 클릭 시 이 함수가 버블링으로 작동할지 캡쳐링으로 작동할지 작성시 판단할 수 있다.
• 3개의 parameter
  addEventListener("type", 리스너(작동될 함수), 캡쳐링을 쓸지)

  세번째 parameter가 true일 경우 캡쳐링을 쓴다. false일 경우 버블링을 쓴다 라는것을 작성시 판단할 수 있다.

(3) 여러개의 이벤트 타입들을 쉽게 바인딩 할 수 있다.

버튼을 누르거나 버튼에 마우스를 올릴 때 모두 함수를 동작하도록 하기

• onclick 의 경우
  : 개수가 많을 경우 관리 어려움

obj.onclick = do1;
obj.onmouseover = do1;

• addEventListener 의 경우
  : 한 배열객체에서 이벤트 발생 type들을 관리할 수 있게 된다.

['mouseover', 'click'].map(function(e) {
    obj.addEventListener(e, do1);
});

3) 결론

🚩 onclick 보다는 addEventListener() 사용하기

4) 번외 - 함수명

(1) 보통은 handle~로 이벤트핸들러의 함수명을 지음

    addEventListener("click", function handleElementClick() {...

(2) 무명함수로 만들수 있지만, 함수명 짓는 것을 추천함

• 디버깅 시 함수명들이 callstack이라는 곳에 찍혀져 나오는데, 무명함수일 경우 해당 함수를 찾을 때 번거로울 수 있음

2. addEventListener에 대해 더 알아보자

1) 다른 함수에서 선언한 내부 변수를 addEventListener 함수에서 가져다 쓰는 방법

• 방법1 - return값으로 반환

  원하는 변수를 다른함수의 return값으로 지정(= 함수실행의 결과값으로 지정)하고, addEventListener()함수의 지역변수에 다른함수의 실행 결과를 할당

function bar() {
  const a = 1;
  return a;       // (1)원하는 변수를 return값으로 반환시키고
}

element.addEventListener("click", function foo() {
  var result = bar(); // (2)함수 실행 결과(즉, 리턴된 값)를 변수에 할당해서 사용 
}
);

• 방법2 - 상위scope로 꺼내기

  원하는 변수를 전역변수로 꺼낸다. 전역변수는 다른 함수에서도 접근 가능한 scope에 있기 때문에 사용할 수 있게 된다.

const a = 1;
function bar() {
}

element.addEventListener("click", function foo() {
  a;
});

2) addEventlistener로 잡은 이벤트객체를 함수 밖에서 사용하는 방법

bar()함수로 이벤트 객체를 받아서 foo()함수에 넘겨주면, foo()함수에서 이벤트 객체를 매개변수로 받아서 활용할 수 있다.

function foo(element) {
	console.log(element.textContent);
}     //이벤트객체를 매개변수로 받아서 textContent를 출력

element.addEventListener("click", function bar(event) {
	foo(event.target);
));

3) addEventListner 함수의 매개변수로 이벤트객체가 아닌 다른 매개변수를 사용하는 방법

외부에 함수를 만들고, addEventListener함수의 실행문에 외부함수가 원하는 매개변수로 실행되도록 작성하기

function foo() {
}

element.addEventListener("click", function bar (event) {
  foo(/* 매개변수 */);
});
//element를 클릭했을 때
//bar함수로 이벤트 객체를 받아오고, 
//foo()함수도 실행되도록 할 수 있다.