JS Event

Junho Yun·2023년 3월 31일
0
post-thumbnail

이벤트 드리븐 프로그래밍

JavaScript에서 이벤트는 사용자가 버튼을 클릭하거나 텍스트 필드에 입력하거나 페이지 로딩을 완료하는 것과 같이 웹 페이지나 애플리케이션에서 발생하는 동작 또는 발생입니다.

JavaScript는 이벤트 핸들러를 사용하여 이벤트를 감지하고 응답하는 기능을 제공합니다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수입니다. 이 함수는 클릭이나 키 누름과 같은 특정 이벤트를 수신하는 이벤트 리스너에 연결할 수 있습니다.

JavaScript를 사용하여 프로그래밍 방식으로 이벤트를 트리거할 수도 있으므로 개발자는 사용자 작업을 시뮬레이션하고 웹 페이지 또는 애플리케이션의 동작을 조작할 수 있습니다.

이벤트는 동적 업데이트 및 사용자 피드백을 허용하므로 대화형 웹 애플리케이션 및 사용자 인터페이스를 만드는 데 중요한 역할을 합니다.

이벤트 타입

https://developer.mozilla.org/en-US/docs/Web/Events#event_listing

  • Mouse events: 이러한 이벤트는 클릭, 호버링 또는 스크롤과 같은 마우스와의 상호 작용에 의해 트리거됩니다.

  • Keyboard events: 이러한 이벤트는 입력, 키 누르기 또는 키에서 손 떼기 등 사용자가 키보드와 상호 작용할 때 트리거됩니다.

  • Form events: 이러한 이벤트는 양식을 제출하거나 입력 필드의 값을 변경하는 등 사용자가 양식과 상호 작용할 때 트리거됩니다.

  • Window events: 이러한 이벤트는 크기 조정, 스크롤 또는 창 닫기와 같은 브라우저 창의 변경에 의해 트리거됩니다.

  • Document events: 이러한 이벤트는 로드, 언로드 또는 URL 변경과 같은 웹 페이지 또는 응용 프로그램 문서의 변경에 의해 트리거됩니다.

  • Custom events: 이러한 이벤트는 개발자가 정의하고 프로그래밍 방식으로 트리거할 수 있으므로 보다 복잡한 상호 작용 및 사용자 지정 기능이 가능합니다.

이벤트 핸들러 등록

각 이벤트 유형에는 이벤트 데이터에 액세스하고 조작하는 데 사용할 수 있는 고유한 속성 및 메서드 집합이 있습니다. 개발자는 이벤트 리스너와 핸들러를 사용하여 이러한 이벤트에 응답하고 웹 애플리케이션에서 동적 및 대화형 동작을 제공할 수 있습니다.

// get the button element
const myButton = document.querySelector('#my-button');

// add an event listener for the click event
myButton.addEventListener('click', function(event) {
  // handle the click event here
  console.log('Button clicked!');
});
// useCapture 생략 가능 
<button id="myButton" onclick="handleClick()">Click me</button>
  • 다중 이벤트 핸들러: addEventListener()를 사용하면 동일한 요소 및 이벤트 유형에 여러 이벤트 핸들러를 연결할 수 있습니다. 이는 동일한 이벤트에 응답해야 하는 여러 구성 요소 또는 모듈이 있을 때 유용합니다.
  • 관심사 분리: addEventListener()를 사용하면 HTML 마크업에서 JavaScript 코드를 분리할 수 있으므로 코드의 유지 관리 및 가독성이 향상될 수 있습니다.
  • 유연성: addEventListener()는 캡처와 버블링과 같은 옵션을 지정하고 필요한 경우 동적으로 이벤트 핸들러를 제거할 수 있으므로 이벤트 처리에 대한 더 많은 유연성과 제어를 제공합니다.
  • 호환성: addEventListener()는 모든 최신 브라우저에서 지원되는 반면 JavaScript에서 직접 이벤트 핸들러 속성을 설정하는 것과 같은 일부 이전 방법은 모든 브라우저에서 지원되지 않을 수 있습니다.

이벤트 핸들러 제거

const myButton = document.querySelector('#my-button');

// define the click event handler
function handleClick(event) {
  console.log('Button clicked!');
}

// add the event listener
myButton.addEventListener('click', handleClick);

// remove the event listener
myButton.removeEventListener('click', handleClick);

removeEventListener()를 사용하여 이벤트 이름과 함수 이름을 인수로 전달하여 버튼 요소에서 이벤트 리스너를 제거할 수 있습니다. 이벤트 리스너가 제거되면 버튼을 클릭해도 handleClick() 함수가 더 이상 실행되지 않습니다.

이벤트 객체

JavaScript에서 이벤트 객체는 버튼 클릭이나 키보드 누름과 같은 이벤트가 발생할 때 브라우저에 의해 자동으로 생성되는 객체입니다. 이벤트 개체에는 대상 요소, 이벤트 유형 및 이벤트와 관련된 모든 데이터와 같은 이벤트에 대한 정보가 포함됩니다.

const myButton = document.querySelector('#my-button');

myButton.addEventListener('click', function(event) {
  // access properties of the event object
  console.log('Target element:', event.target);
  console.log('Event type:', event.type);
  console.log('Mouse coordinates:', event.clientX, event.clientY);
});

이벤트 전파

이벤트 버블링 및 캡처링은 DOM(Document Object Model) 계층 구조에서 이벤트 전파 프로세스의 두 단계입니다.

이벤트 버블링에서 이벤트는 가장 낮은 수준의 요소에 의해 먼저 처리된 다음 계층 구조를 통해 가장 높은 수준의 조상 요소로 전파됩니다. 이는 하위 요소의 이벤트 핸들러가 상위 요소의 이벤트 핸들러보다 먼저 호출됨을 의미합니다.

이벤트 캡처링에서는 반대 현상이 발생합니다. 이벤트는 먼저 가장 높은 수준의 조상 요소에 의해 처리된 다음 계층 구조를 통해 가장 낮은 수준의 요소로 전파됩니다. 이는 상위 요소의 이벤트 핸들러가 하위 요소의 이벤트 핸들러보다 먼저 호출됨을 의미합니다.

const myButton = document.querySelector('#my-button');

myButton.addEventListener('click', function(event) {
  console.log('Button clicked during bubbling phase');
}, false);

myButton.addEventListener('click', function(event) {
  console.log('Button clicked during capturing phase');
}, true);

이 예제에서는 myButton 요소에 대해 두 개의 클릭 이벤트 핸들러를 등록합니다. 첫 번째 핸들러는 버블링 단계에서 등록되고 두 번째 핸들러는 캡처 단계에서 등록됩니다. 버튼을 클릭하면 캡처 단계에서 등록되기 때문에 두 번째 핸들러가 첫 번째 핸들러보다 먼저 실행됩니다.

이벤트 위임

이벤트 위임은 각 개별 자식 요소에 이벤트 리스너를 연결하는 대신 이벤트 처리를 상위 수준 부모 요소에 위임하여 이벤트를 효율적으로 처리하기 위해 JavaScript에서 사용되는 기술입니다.

  • 효율성: 각각의 개별 자식 요소에 이벤트 리스너를 등록하는 대신 부모 요소에 단일 이벤트 리스너만 등록하면 됩니다. 이렇게 하면 작성해야 하는 코드의 양이 크게 줄어들고 많은 수의 자식 요소에 대한 성능이 향상됩니다.

  • 역동성: 이벤트 위임은 추가 이벤트 리스너를 등록하지 않고도 동적으로 생성되거나 삭제된 자식 요소의 이벤트를 처리할 수 있습니다.

  • 단순성: 이벤트 위임은 관리해야 하는 이벤트 리스너의 수를 줄이고 보다 선언적으로 이벤트를 처리할 수 있도록 하여 코드를 단순화할 수 있습니다.

<ul id="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
const myList = document.querySelector('#my-list');

myList.addEventListener('click', function(event) {
  if (event.target.nodeName === 'LI') {
    console.log(`You clicked on ${event.target.innerText}`);
  }
});

이 예제에서는 myList 요소에 클릭 이벤트 리스너를 등록하고 event.target 속성을 사용하여 어떤 li 요소가 클릭되었는지 확인합니다. 이 접근 방식을 사용하면 각 개별 li 요소에 이벤트 리스너를 등록하지 않고도 myList 요소 내의 모든 li 요소에 대한 클릭을 처리할 수 있습니다.

DOM 요소의 기본 동작 조작

  • e.stopPropagation : 이벤트 전파 중단
  • e.preventDefault : 기본 동작 중단

이벤트 핸들러 내부의 this

이벤트 핸들러에 인수 전달

<button id="my-button">Click me!</button>
const myButton = document.querySelector('#my-button');

myButton.addEventListener('click', handleClick.bind(null, 'Hello', 'World'));

function handleClick(arg1, arg2, event) {
  console.log(`${arg1}, ${arg2}!`);
}

커스텀 이벤트

JavaScript에서 사용자 지정 이벤트는 브라우저에 내장된 이벤트가 아니라 개발자가 정의하고 전달하는 이벤트입니다. 사용자 지정 이벤트를 통해 개발자는 자신의 이벤트 유형을 정의하고 프로그래밍 방식으로 트리거할 수 있습니다.

커스텀 이벤트를 만들려면 먼저 CustomEvent 클래스의 새 인스턴스를 만들어야 합니다. CustomEvent 생성자는 이벤트 유형 및 이벤트 버블링 또는 취소 가능 여부와 같은 이벤트의 추가 속성을 지정할 수 있는 옵션 개체의 두 가지 인수를 사용합니다.

const myEvent = new CustomEvent('my-event', { detail: { message: 'Hello, world!' } });

window.dispatchEvent(myEvent);
window.addEventListener('my-event', function(event) {
  console.log(event.detail.message);
});

이 예제에서는 'my-event' 이벤트에 대한 이벤트 리스너를 등록하고 이벤트가 트리거될 때 detail 객체의 message 속성을 콘솔에 기록합니다.

profile
Junho Yun
의미 없는 코드는 없다.
이전 포스트

프론트엔드를 위한 CS 지식 (2) - 네트워크

다음 포스트

프론트엔드를 위한 CS 지식 (3) - 데이터베이스

0개의 댓글