[J.S_DOM] 7-1. 이벤트 다루기 예제

7.0 이벤트란 무엇인가

<button id="btn">클릭</button>

<script>

  // 버튼 클릭 시 경고창 띄우기

  document.getElementById('btn').addEventListener('click', function() {

    alert('버튼이 클릭되었습니다!');

  });

  // 페이지 로드 완료 시 콘솔 출력

  window.addEventListener('load', function() {

    console.log('페이지가 완전히 로드되었습니다.');

  });

</script>

7.1 자바스크립트에서 이벤트를 처리하는 방법

7.1.1 HTML 태그 속성에 직접 지정

<button onclick="alert('버튼이 클릭되었습니다!')">클릭</button>

7.1.2 DOM 프로퍼티로 지정

<button id="btn">클릭</button>

<script>

  const btn = document.getElementById('btn');

  btn.onclick = function() {

    alert('버튼 클릭!');

  };

</script>

7.1.3 addEventListener 방식

<button id="btn">클릭</button>

<script>

  const btn = document.getElementById('btn');

  btn.addEventListener('click', function() {

    alert('버튼 클릭!');

  });

</script>

7.1.4 이벤트 종류 작성 규칙

// DOM 프로퍼티 방식 - 이벤트명 앞에 'on' 포함

element.onclick = function() { ... };

// addEventListener 방식 - 이벤트명만 작성

element.addEventListener('click', function() { ... });

7.2 주요 이벤트 종류

button id="btn">클릭</button>

<input id="input" placeholder="키 입력 해보세요" />

<form id="form">

  <input type="text" name="name" placeholder="이름 입력" />

  <button type="submit">제출</button>

</form>

<script>

  // 마우스 이벤트

  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => console.log('click 이벤트 발생'));

  btn.addEventListener('dblclick', () => console.log('dblclick 이벤트 발생'));

  btn.addEventListener('mouseover', () => console.log('mouseover 이벤트 발생'));

  btn.addEventListener('mouseout', () => console.log('mouseout 이벤트 발생'));

  // 키보드 이벤트

  const input = document.getElementById('input');

  input.addEventListener('keydown', (e) => console.log(`keydown: ${e.key}`));

  input.addEventListener('keyup', (e) => console.log(`keyup: ${e.key}`));

  // 폼 이벤트

  const form = document.getElementById('form');

  form.addEventListener('submit', (e) => {

    e.preventDefault();

    console.log('폼 제출됨');

  });

  // 윈도우 이벤트

  window.addEventListener('resize', () => console.log('창 크기 변경됨'));

  window.addEventListener('load', () => console.log('페이지 완전 로드됨'));

</script>

7.3 이벤트 객체

<button id="btn">클릭</button>

<script>

  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(event) {

    console.log('이벤트 타입:', event.type);

    console.log('이벤트 발생 요소:', event.target);

    console.log('현재 이벤트 핸들러 연결 요소:', event.currentTarget);

  });

</script>

7.4 이벤트 흐름

  <div id="outer">

    <button id="inner">클릭</button>

  </div>

  <script>

    document.getElementById('outer').addEventListener('click', () => {

      console.log('바깥 클릭!');    // 버블링

    });

    document.getElementById('inner').addEventListener('click', () => {

      console.log('안쪽 클릭!');    // 타깃

    });

  </script>

7.4.2 전파 제어

<div id="outer" style="padding:20px; background: #f0f0f0;">

  바깥 영역

  <button id="inner">안쪽 버튼</button>

</div>

<script>

  document.getElementById('outer').addEventListener('click', () => {

    console.log('바깥 클릭!'); // 출력 안됨

  });

  document.getElementById('inner').addEventListener('click', (event) => {

    event.stopPropagation(); // 부모로 전파 막기

    console.log('안쪽 클릭!');  

  });

</script>

7.5 이벤트 기본 동작 취소

<a href="https://google.com" id="link">구글</a>

<script>

  document.getElementById('link').addEventListener('click', function(event) {

    event.preventDefault(); // 링크 이동 방지

    alert('이동이 취소되었습니다.');

  });

</script>

7.5.3 event.stopPropagation() 사용법

event.stopPropagation()은 이벤트가 부모 요소로 전파 되는것을 방해

<div id="outer">

  <button id="inner">클릭</button>

</div>

<script>

  document.getElementById('outer').addEventListener('click', () => {

    console.log('바깥 클릭!');

  });

  document.getElementById('inner').addEventListener('click', (event) => {

    event.stopPropagation(); // 부모로 전파 방지

    console.log('안쪽 클릭!');

  });

</script>

 

7.6 이벤트 위임

<ul id="menu">

  <li>항목1</li>

  <li>항목2</li>

</ul>

<script>

document.getElementById('menu').addEventListener('click', function(e) {

  if (e.target.tagName === 'LI') {

    console.log(e.target.textContent + ' 클릭됨');

  }

});

</script>