[javascript] 이벤트 처리 실습하기

14 Dec 2023

javascript

자바스크립트를 사용하여 웹 페이지에서 이벤트를 처리하는 방법에 대해 알아보겠습니다.

1. HTML 요소에 이벤트 처리기 등록하기

HTML 요소에 이벤트 처리기를 등록하여 사용자의 동작에 반응할 수 있습니다. 아래는 버튼 클릭 이벤트를 처리하는 예제입니다.

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

<script>
  document.getElementById('myButton').addEventListener('click', function() {
    alert('버튼이 클릭되었습니다');
  });
</script>

위의 예제에서는 id가 “myButton”인 버튼 요소를 찾아 클릭 이벤트에 대한 처리기를 등록했습니다.

2. 이벤트 객체 활용하기

이벤트 객체를 활용하여 사용자의 동작과 관련된 정보를 얻을 수 있습니다. 아래는 마우스 이벤트를 처리하는 예제입니다.

<div id="myDiv">마우스를 올려보세요</div>

<script>
  document.getElementById('myDiv').addEventListener('mouseover', function(event) {
    console.log('마우스 좌표:', event.clientX, event.clientY);
  });
</script>

위의 예제에서는 id가 “myDiv”인 요소 위에 마우스를 올렸을 때 이벤트 객체를 통해 마우스의 좌표를 콘솔에 출력합니다.

3. 이벤트 전파 제어하기

이벤트 전파를 제어하여 이벤트의 동작을 조절할 수 있습니다. 아래는 이벤트 전파를 중지하는 예제입니다.

<div id="myOuterDiv">
  <div id="myInnerDiv">내부 요소</div>
</div>

<script>
  document.getElementById('myInnerDiv').addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('내부 요소가 클릭되었습니다');
  });

  document.getElementById('myOuterDiv').addEventListener('click', function() {
    console.log('외부 요소가 클릭되었습니다');
  });
</script>

위의 예제에서는 내부 요소가 클릭되었을 때 이벤트 전파를 중지하고, 외부 요소의 클릭 이벤트가 동작하지 않도록 조절했습니다.

이와 같이 JavaScript를 사용하여 다양한 이벤트를 처리하고 제어할 수 있습니다.

더 자세한 내용은 MDN Web Docs를 참고하세요.