[중앙정보처리학원] DOM* 이벤트 핸들러

<script>
  const $btn = document.getElementById('btn');

  // 이벤트 핸들러
  const helloHandler = () => alert('알룡??');

  // $btn.onlick = helloHandler;
  $btn.addEventListener('click', helloHandler);

  // 기존 핸들러를 지우고 싶으면 수동으로 지워야 함
  // 수동으로 지울때는 반드시 핸들러가 기명함수이어야 함.
  $btn.removeEventListener('click', helloHandler);
  
  $btn.addEventListener('click', () => {
    $btn.style.background = 'aqua';
  });

</script>​

 

 

 

마우스 이벤트

• click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생합니다.
• dblclick – 요소 위에서 마우스 왼쪽 버튼을 두번 빠르게 눌렀을 때 발생합니다.
• contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.
• mouseover와 mouseup – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생합니다.
• mouseleave과 mouseout – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생합니다.
• mousemove – 마우스를 움직일 때 발생합니다

 

 

키보드 이벤트

• keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생합니다.

 

폼 요소 이벤트

• submit – 사용자가 <form>을 제출할 때 발생합니다.
• change – 사용자가 <input>과 같은 요소에 값이 변할 때 발생합니다.
• focus – 사용자가 <input>과 같은 요소에 포커스 할 때 발생합니다.
• blur – 사용자가 <input>과 같은 요소에 포커스를 해제할 때 발생합니다.

 

어트리뷰트 방식

과거에 많이 사용하던 방식이지만 자바스크립트와 HTML의 분리를 위해 사용하지 않는 것이 좋습니다

 

 

 

 

2. 프로퍼티 방식

• 이벤트 핸들러를 요소 노드의 프로퍼티로 추가하는 방식입니다.
• 이 방식은 HTML과 자바스크립트를 분리하여 코딩할 수 있다는 장점이 있습니다.
• 하지만 하나의 요소에 하나의 이벤트 핸들러만 바인딩할 수 있는 단점이 있습니다.

<script>
    // 이벤트 핸들러 : 브라우저에서 일어나는 
    // 이벤트에 대해 해야 할일을 함수로 만드는 것
    function boxClickHandler() {
      alert('오렌지색 박스를 클릭함!');
    }
    
    const growHandler = function() {
      const $redBox = document.querySelector('.red');
      $redBox.style.width = '200px';
    };

    const makeTextHandler = () => {
      const $greenBox = document.querySelector('.green');
      $greenBox.textContent = '안녕?';
    }
  </script>

 

 

3. 콜백함수 방식

• addEventListener 메서드는 첫번째 인수로 이벤트 종류를 나타내는 문자열의 이벤트 타입을 전달합니다.
• 이 때 접두사 on을 붙이지 않습니다.
• 두 번째 인수로는 이벤트 핸들러 함수를 콜백으로 전달합니다.
• 이 방법은 동일한 요소에서 동일한 이벤트에 대해 하나 이상의 이벤트 핸들러를 등록할 수 있습니다.

<script>
    // 이벤트 핸들러
    function sayHelloHandler() {
      alert('hello!');
    }

    const $b1 = document.getElementById('b1');
    $b1.onclick = sayHelloHandler;

    const $b2 = document.getElementById('b2');
    $b2.ondblclick = () => {
      $b2.style.width = '150px';
    };

    const $b3 = document.getElementById('b3');

    $b3.onmouseover = () => {
      $b3.style.background = 'red';
    };
    $b3.onmouseleave = () => {
      $b3.style.background = 'yellow';
    };
    
    // 프로퍼티 방식의 단점: 같은 타입의 이벤트에는 여러 핸들러를
    // 바인딩 할 수 없음.
    $b3.onmouseleave = sayHelloHandler;

    // 이벤트 핸들러 제거
    // 몇초 후에 코드 실행
    setTimeout(() => {
      // alert('메롱');
      $b3.onmouseleave = null;
    }, 5000); // 2000밀리초 == 2초
  </script>