이벤트(Events) - javascript 기본

Javascript Event

Event란?

Event는 웹 페이지에서 발생하는 모든 일을 의미한다.

• 사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 마우스를 움직이는 등의 모든 행위를 의미한다.
• 이벤트는 브라우저에서 발생하는 것이기 때문에 브라우저에서만 사용할 수 있다.

간단한 예제

버튼을 클릭하면 target의 글자색이 빨간색으로 바뀌는 예제를 만들어보겠습니다.

<button>change color</button>
<div id="target">Hello</div>

const button = document.querySelector('button');
const target = document.querySelector('#target');

button.addEventListener('click', () => {
    target.style.color = 'red';
});

Event 종류

HTML DOM Events 에서 확인할 수 있고 가장 많이 사용되는 이벤트는 다음과 같다.

• click : 클릭
• mouseover : 마우스가 요소 위에 올라갈 때
• mouseout : 마우스가 요소에서 벗어날 때
• keydown : 키보드를 누를 때
• keyup : 키보드를 뗄 때
• submit : 폼을 제출할 때
• change : input 요소의 값이 변경될 때

Event 객체

이벤트가 발생하면 이벤트 객체가 생성되고 이벤트에 대한 정보를 가지고 있다.

document.querySelector('button').addEventListener('click', event => {
    console.log(event);
});

Event 객체의 속성

• type : 이벤트의 종류
• target : 이벤트가 발생한 요소
• currentTarget : 이벤트가 발생한 요소
• preventDefault() : 이벤트의 기본 동작을 막는다.
• stopPropagation() : 이벤트의 전파를 막는다.

Event 객체의 메소드

• addEventListener() : 이벤트 리스너를 등록한다.
• removeEventListener() : 이벤트 리스너를 제거한다.

Event 전파

이벤트는 전파되는데, 이벤트가 발생한 요소에서 시작해서 상위 요소로 전파된다.

이벤트 전파는 캡처링과 버블링 두 가지 방식이 있다.

- 이벤트 전파의 두 가지 방식

1. 캡처링(Capturing)

   • 이벤트가 상위 요소에서 시작하여 하위 요소로 전파됩니다.
   • 이벤트 리스너를 등록할 때 세 번째 인수로 true를 전달하여 캡처링 모드를 활성화합니다.

2. 버블링(Bubbling)

   • 이벤트가 하위 요소에서 시작하여 상위 요소로 전파됩니다.
   • 기본 모드이며, 이벤트 리스너를 등록할 때 세 번째 인수를 생략하거나 false로 설정합니다.

- 캡처링

버튼을 클릭하면 캡처링 모드에서는 body -> div -> button 순으로 콘솔에 출력됩니다.

<div style="padding: 50px; background-color: lightgray;">
    <button style="padding: 20px;">Click Me</button>
</div>

document.querySelector('button').addEventListener(
    'click',
    () => {
        console.log('button');
    },
    true,
);

document.querySelector('div').addEventListener(
    'click',
    () => {
        console.log('div');
    },
    true,
);

document.querySelector('body').addEventListener(
    'click',
    () => {
        console.log('body');
    },
    true,
);

- 버블링

버튼을 클릭하면 버블링 모드에서는 button -> div -> body 순으로 콘솔에 출력됩니다.

document.querySelector('button').addEventListener('click', () => {
    console.log('button');
});

document.querySelector('div').addEventListener('click', () => {
    console.log('div');
});

document.querySelector('body').addEventListener('click', () => {
    console.log('body');
});

Event 객체의 전파 방지

stopPropagation() 메소드를 사용하여 이벤트 전파를 막을 수 있다.

document.querySelector('button').addEventListener('click', event => {
    event.stopPropagation();
    console.log('button');
});

document.querySelector('div').addEventListener('click', () => {
    console.log('div');
});

document.querySelector('body').addEventListener('click', () => {
    console.log('body');
});

Event 객체의 기본 동작 막기

preventDefault() 메소드를 사용하여 이벤트의 기본 동작을 막을 수 있다.

document.querySelector('a').addEventListener('click', event => {
    event.preventDefault();
    console.log('a');
});

버튼을 클릭하면 button만 출력됩니다. stopPropagation() 메서드가 이벤트 전파를 막기 때문입니다.

Event 객체의 활용

이벤트 객체를 활용하여 버튼을 클릭하면 target의 글자색을 빨간색으로 바꾸고, 이벤트가 발생한 요소의 글자색을 파란색으로 바꾸는 예제를 만들어보겠습니다.

<button>change color</button>
<div id="target">Hello</div>

document.querySelector('button').addEventListener('click', event => {
    const target = document.querySelector('#target');
    target.style.color = 'red';
    event.target.style.color = 'blue';
});