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 전파
이벤트는 전파되는데, 이벤트가 발생한 요소에서 시작해서 상위 요소로 전파된다.
이벤트 전파는 캡처링
과 버블링
두 가지 방식이 있다.
- 이벤트 전파의 두 가지 방식
캡처링(Capturing)
- 이벤트가 상위 요소에서 시작하여 하위 요소로 전파됩니다.
- 이벤트 리스너를 등록할 때 세 번째 인수로 true를 전달하여 캡처링 모드를 활성화합니다.
버블링(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';
});
'Front > JavaScript' 카테고리의 다른 글
javascript 배우기 (0) | 2024.07.07 |
---|---|
DOM - javascript 기본 (0) | 2024.07.06 |
비동기(Async) - javascript 기본 (0) | 2024.07.06 |
변수(Variable) - javascript 기본 (0) | 2024.06.23 |
javascript 핵심 요약 (1) | 2024.05.30 |