TIL 14일차

ᄋᄋ·2021년 12월 12일

event & event handler

이벤트 객체

사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체.

다음 예시 코드를 참고하기.

<body>
    <button>아메리카노</button>
    <button>카페라떼</button>
    <script>
      let menus = document.querySelectorAll("button"); //모든 버튼 가져오기.

      let btnAmericano = menus[0];
      let btnCaffelatte = menus[1];

      function handleClick(e) {
        let currentMenu = e.target.textContent;
        console.log(currentMenu + "를 클릭하셨습니다.");
      }

      for (let drink of menus) {
        drink.onclick = handleClick;
      }

      // btnAmericano.onclick = handleClick;
      // btnCaffelatte.onclick = handleClick; 
    </script>
  </body>

사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있음. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져오는 거임.

이벤트 핸들러 비교

addEventListener

el.addEventListener('click', ( ) => { }, 또는 함수 이름)   // modern

한 요소에 똑같은 이벤트 여러 개 등록 가능.
2개 이상의 이벤트를 한꺼번에 등록 가능.
addEventListener('click', f1); addEventListener('click', f2) 방식
이벤트를 할당하고 해제하는 게 좀 더 쉬움.

예를 들어 el.addEventListener('click', f1); 으로 등록한 이벤트 핸들러를 삭제하려면 el.removeEventListener('click', f1);
이렇게 이벤트를 등록했던 방식과 같은 형식으로 작성해야 함.

el.addEventListener('click', ( ) => { });
이렇게 두번째 파라미터에 콜백함수를 쓰는 경우는 removeEventListener 메소드로는 삭제할 수 없음.

on이벤트 핸들러

el.onclick = ( ) => { }, 또는 함수 이름   // old

앞에 이벤트를 걸고 똑같은 이벤트를 뒤에 걸면 앞에 걸었던 이벤트가 지워짐.
el1.onclick = function(e) {console.log(e.target)}; 을 먼저 등록한 다음에,
el1.onclick = function(e) {console.log(e.currentTarget)}; 을 등록하면, 제일 최근에 등록한 이벤트 핸들러만 작동함.
해제하는 것도 addEventListener에 비해 까다로움.