이벤트 핸들러

이벤트 리스너란?
- DOM 요소에서 발생하는 이벤트를 감지하고, 해당 이벤트가 발생할 때 자동으로 실행하는 함수
- 이벤트 핸들러랑 거의 동일
// 다른점
-> addEventLIstener() 매서드를 사용하여 이벤트 리스너를 등록
-> 여러개 등록시 모든 이벤트 리스너가 유효

요소.addEventListener(event, callback, useCapture);
e.g. element.addEventListener
- event: 감지하고자 하는 이벤트의 종류 (ex: 'click', 'keydown', 'submit') -> 이벤트 핸들러에서 on을 빼면 됨
- callback: 이벤트가 발생했을 때 호출될 함수
- useCapture: 이벤트 캡쳐링 여부 (true 이면 캡쳐링,  false이면 버블링), 기본값 = false

* 이벤트 캡쳐링이란?
- 이벤트가 전파되는 방식을 지정
- 여러개의 이벤트가 지정되었을 때 전파 방식을 지정
- 캡쳐링 : 이벤트가 최상위 부모 요소에서부터 자식 요소로 전파
- 버블링: 자식요소에서 부모 요소로 전파
e.stopPropagation(); // 이벤트 전파 막는 함수

1. 클릭 이벤트 (click)

<button id="myButton">클릭하세요</button>

<script>
    const button = document.getElementById('myButton');

    button.addEventListener('click', function(){
      alert('버튼이 클릭 됨');
    });
</script>

2. 마우스오버/마우스아웃
- 사용자가 마우스를 요소 위에 올리거나 벗어날 때 이벤트

<img src="img/insta.png" onmouseover="this.src='img/kakao.png'" onmouseout="this.src='img/insta.png'" alt="" style="width:100px;">

// 위코드를 script로 변경

<img src="img/insta.png" alt="" style="width:100px;">

<script>
    document.getElementsByTagName('img')[0].addEventListener('mouseover', function(){
      this.src="img/kakao.png";
    });
    document.getElementsByTagName('img')[0].addEventListener('mouseout', function(){
      this.src="img/insta.png";
    });
</script>

 

 

3. 키 입력 이벤트 (keydown, keyup)
- 사용자가 키보드의 키를 눌렀을 때 이벤트

<input id="myInput" type="text" placeholder="여기에 써주세요.">
<p id="myP">여기에 입력한 내용이 출력됩니다.</p>

<script>
  const input = document.getElementById('myInput');
  
  let myP = document.getElementById('myP');
  let initFlag = true;

  input.addEventListener('keydown', function(event){
    console.log('입력한 키' + event.key); // event.key: 당시 입력된 내용

    if(initFlag){
      myP.textContent = '';
      initFlag = false;
    }
    if(event.key != 'Backspace'){
      myP.textContent += event.key; // 기존 내용에 추가
    }

  });

  input.addEventListener('keyup', function(event){
    console.log(`키를 떼었습니다: ${event.key}`);
  });
</script>

4. 폼 제출 이벤트 (submit)
- 사용자가 폼을 제출할 때 발생하는 이벤트

<form id="myForm" action="https://www.naver.com">
  <input id="userName" type="text" placeholder="사용자 이름">
  <button type="submit">제출</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event){
    if(조건){
      alert('제출 되었습니다.');
    }else{
      event.preventDefault(); // 폼이 제출되지 않음 // url이 변하지 않음
    }
  });
</script>

5. 변경 이벤트 (change) **많이 사용
- 사용자가 입력 필드나 셀렉트 박스 값을 변경할 때 이벤트

<script>
  const select = document.getElementById('mySelect');

  select.addEventListener('change', function(){
    alert(`선택한 과일: ${select.value}`); // 서버에 전송시 value 값 전송
  });
</script>

** 이벤트 리스너의 주요 특징 **
- 하나의 요소에 여러개의 이벤트 리스너 등록 가능
- 등록한 이벤트를 제거 가능 // 익명 함수면 어려움 (함수로 선언하면 가능)

<button id="myButton">클릭하세요</button>
<button id="delEvent">이벤트 리스너 삭제</button>

<script>
  const button = document.getElementById('myButton');
  const delEvent = document.getElementById('delEvent');

  function handleClick(){
    alert('클릭 되었습니다.');
  }

  button.addEventListener('click', handleClick);
  delEvent.addEventListener('click', function(){
    button.removeEventListener('click', handleClick);

    alert('이벤트 리스너 삭제!');
  });
</script>