EVENT
: 웹 페이지에서 일어날 수 있는 대부분의 일들
addeventlistener
🔻 event 표현 방식
1. on~
2. addEventListener
window.addEventListener("resize", EventHandler.ChangeWindow);
window.onresize = EventHandler.ChangeWindow;
const EventHandler = {
ChangeWindow() {
title.innerHTML = "window change";
title.style.color = colors[2];
}
✔️ onclick 프로퍼티에 함수를 할당
: 여러개 이벤트 핸들러 다룰수 없다는 단점
//event handling 이벤트 핸들링 (이벤트 발생시 어떤 동작하도록 이벤트 다루는 것)
const btn = document.querySelector('#myBtn');
btn.onclick = function () { //event handler 이벤트 핸들러 (구체적 동작들을 코드로 표현)
console.log('Hello');
}
✔️ elem . addEventListener ( event type , event handler)
: 하나의 요소에 여러개의 독립적인 이벤트 핸들러 등록가능
//이벤트 핸들러 등록하기
const btn = document.querySelector('#myBtn');
// 1. event 함수생성
function event1() {
console.log('hello');
}
// 2. event 함수등록
btn.addEventListner('click', event1());
element . removeEventListener ( event, handler )
: 개별적으로 제거가능
event object
> event가 발생하면 event handler의 첫번째 파라미터에는 자동으로 이벤트 객체가 전달.
그 이벤트 객체는 이벤트 타입에따라 갖고있는 프로퍼티들이 다름
https://manon-kim.tistory.com/35?category=1037367
e.target.name은 인풋태그의 이름
e.target.value는 인풋태그에 입력되는 값
//input에 입력하는 값 출력
class SearchBar extends Component {
render() {
return <input onChange={this.onInputChange} />;
}
onInputChange(event) {
console.log(event.target.value);
}
}
//위 코드랑 동일
render() {
return <input onChange={(event) => console.log(event.target.value)} />;
}
event bubbling
event bubbling
: 같은 타입의 이벤트한해서 부모 요소의 핸들러 동작하게 되는 것 ( 최상단 윈도우 객체 만날 때 까지 과정 반복됨)
: 버블링 일어나도 이벤트 객체의 target 프로퍼티는 변하지 않고 처음 이벤트 발생 시작점 담고 있음.
currentTarget (이벤트 핸들러가 등록된 요소에 접근)
stopPropagation (버블링 멈춤) : 모든 부모 요소 입장에서 stop적용한 영역만큼 이벤트 발생범위 사라져서 잘안씀.
preventDefault
: 브라우저의 기본기능 막는기능
( ex 마우스 오 클릭 > 메뉴 뜨는 기본기능)
// 브라우저의 기본 동작
const link = document.querySelector('#link');
const checkbox = document.querySelector('#checkbox');
const input = document.querySelector('#input');
const text = document.querySelector('#text');
// 1
link.addEventListener('click', function(e) {
e.preventDefault();
alert('이동불가.'); });
//2
input.addEventListener('keydown', function(e) {
if (!checkbox.checked) {
e.preventDefault();
alert('체크박스를 먼저 체크해 주세요.');
}
});
//3
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
alert('마우스 오른쪽 클릭은 사용할 수 없습니다.');
});1. <a>태그의 기능 막음
2. <input type='checkbox>의 체크가 안됬을때 기능막음
3. 마우스 우클릭 방지기능
event delegation 이벤트위임
> 버블링 개념을 활용하여 이벤트를 관리
예제 <할일리스트 만들기>
classList.contains 메소드 ( class안에 해당네임이 있는지 확인)
toggle : 해당되는 것이 있다면 remove / 없으면 add
/ tagName === '대문자로 태그이름'
: 파라미터로 전달하는 값이 해당 요소의 클래스 속성에 있는지 확인해서 불린 형태로 결과를 리턴
// 1. <li>각각은 적용가능하지만 추가됬을 때 다시 이벤트 핸들러 새로등록해야함
const list = document.querySelector('#list');
for (let i of list.children) {
i.addEventListener ('click', function(e){
e.target.classList.toggle('done');
});
}
/* 수정1. 버블링 이용해서 수정 but <li>근처에서도 작동
cuz 부모요소(list)에 핸들러 등록해서 자식 작동하게한 원리라서 부모영역에서도 작동됨*/
list.addEventListener('click', function(e) {
e.target.classList.toggle('done');
});
// 최종코드 ver1: list중 'item'포함하는지 확인
list.addEventListener('click', function(e) {
if (e.target.classList.contains('item')) {
e.target.classList.toggle('done');
}
});
// 최종코드 ver2: tagname이 li인것 선택
list.addEventListener ('click', function(e) {
if (e.target.tagName === 'LI') {
e.target.classList.toggle('done');
}
});
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h1 id="title">오늘 할 일</h1>
<ul id="list">
<li class="item">자바스크립트 공부</li>
<li class="item">유튜브 시청</li>
<li class="item">저녁 약속</li>
<li class="item">독서</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>.item {
margin: 10px 0;
cursor: pointer;
}
.done {
opacity: 0.5;
text-decoration: line-through;
}
(유사예제 )
function updateToDo(event) {
if (event.target.classList.contains('item')) {
event.target.classList.toggle('done');
}
}
toDoList.addEventListener('click', updateToDo);
mouse click event
✔️ MouseEvent.button
0: 마우스 왼쪽 버튼
1: 마우스 휠
2: 마우스 오른쪽 버튼
✔️ MouseEvent.type
click
: 마우스 왼쪽 버튼을 눌렀을 때
contextmenu
: 마우스 오른쪽 버튼을 눌렀을 때
dblclick
: 동일한 위치에서 빠르게 두번 click할 때
mousedown
: 마우스 버튼을 누른 순간
mouseup
: 마우스 버튼을 눌렀다 뗀 순간
* 하나의 동작에 여러 이벤트 발생가능
ex : 왼쪽버튼 클릭 > 3개의 이벤트발생 (mousedown, mouseup, click)
// 예제. 청기백기 게임
const flagBlue = document.querySelector('.flag-blue');
const flagWhite = document.querySelector('.flag-white');
function reset() {
document.querySelector('.up').classList.remove('up');
}
// 1. flagUp 함수
function flagUp(e) {
if (e.button === 0) {
flagBlue.classList.add('up')
} else if (e.button === 2) {
flagWhite.classList.add('up')
}
// 500 밀리초 뒤에 reset함수를 실행
setTimeout(reset, 500);
}
// 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창 막음
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
mouse move event
✔️ MouseEvent.type
mousemove
: 마우스 포인터가 이동할 때
mouseover
: 마우스 포인터가 요소 밖에서 안으로 이동할 때
mouseout
: 마우스 포인터가 요소 안에서 밖으로 이동할 때
✔️ mousemove
> MouseEvent . clientX, clientY
: 화면에 표시되는 창 기준 마우스 포인터 위치
> MouseEvent . pageX, pageY
: 웹 문서 전체 기준 마우스 포인터 위치
> MouseEvent . offsetX, offsetY
: 이벤트가 발생한 요소 기준 마우스 포인터 위치
const box1 = document.querySelector('#box1');
function onMouseMove(e) {
console.log(`client: (${e.clientX}, ${e.clientY})`);
console.log(`page: (${e.pageX}, ${e.pageY})`);
console.log(`offset: (${e.offsetX}, ${e.offsetY})`);
console.log('------------------------------------');
}
box1.addEventListener('mousemove', onMouseMove);
✔️ mouseover / mouserout
요소끼리 이동할때 over과 out동시에 일어남 (직전요소에서 out > 다음요소에 over)
> toggle 메소드 활용 (over에서 클래스추가되고 out에서 삭제되는 방식으로 동작)
예제1) 'cell'포함된 target에 mouseover/out event일어나면 >토글on > #box2 : background-color 변경/꺼짐
//#box2는 backgorund-color있는 태그
const box2 = document.querySelector('#box2');
//예제1
function printEventData(e) {
if ( e.target.classList.contains('cell')) {
e.target.classList.toggle('on');
}
}
//예제2
function printEventData(e) {
console.log('event:', e.type);
console.log('target:', e.target);
console.log('relatedTarget:', e.relatedTarget);
console.log('------------------------------------');
if (e.target.classList.contains('cell')) {
e.target.classList.toggle('on');
}
}
//핸들러 등록
box2.addEventListener('mouseover', printEventData);
box2.addEventListener('mouseout', printEventData);예제2)
MouseEvent.target
: 이벤트가 발생한 요소
MouseEvent.relatedTarget
: 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소
✔️ mouseenter / mouseleave
요소 바깥>안 / 안> 바깥 나갈때 발생
over과 다르게 버블링 일어나지 않아서 핸들러가 등록된 요소에서만! 동작
> 자식요소에 영향 끼치지않음
(자식요소의 영역을 구분하지 않아서 이벤트 발생하지않음.)
참고 사이트
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
'ARCHIVE > JavaScript' 카테고리의 다른 글
| [JS] 삼항연산 / spread / Optional Chaining / Destructuring (0) | 2021.09.22 |
|---|---|
| [JS] querySelector (0) | 2021.09.18 |
| [JS] DOM (0) | 2021.08.15 |
| [JS] 함수 ( function ) (0) | 2021.08.10 |
| [JS] array 배열 (0) | 2021.08.05 |