13. 이벤트

13-1. 이벤트

GitHub - charile1/js_book_example

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/charile1/js_book_example

13-1-1. 이벤트(event)란?

<button>색깔 바꾸기</button>

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

function randomNumber(num) {
    return Math.floor(Math.random() * (num+1));
}

button.addEventListener('click', () => {
    const randomColor = `rgb(${randomNumber(255)}, ${randomNumber(255)}, ${randomNumber(255)})`;
	  document.body.style.backgroundColor = randomColor;
});

13-1-2.이벤트 타입

13-1-2-1. 마우스 이벤트

<div class='box'></div>
<input class='btn_clear' type='button' value='clear'>
<div class='result'></div>

.box {
    background: yellow;
    height: 200px;
    width: 200px;
}

const div = document.querySelector('.box');
const btnClear = document.querySelector('.btn_clear');
const result = document.querySelector('.result');

div.addEventListener('click', (event) => {
    result.innerHTML+= '<div>click</div>';
});

div.addEventListener('mousedown', (event) => {
    result.innerHTML+= '<div>mousedown</div>';
});

div.addEventListener('mouseup', (event) => {
    result.innerHTML+= '<div>mouseup</div>';
});

btnClear.addEventListener('click', (event) => {
    result.innerHTML= '';
});

13-1-2-2. 키보드 이벤트

<input class='input' type='text'>
<input class='clear' type='button' value='clear'>
<div class='result'></div>

const inputBox = document.querySelector('.input');
const btnClear = document.querySelector('.clear');
const result = document.querySelector('.result');

inputBox.addEventListener('keydown', () => {
    result.innerHTML += '<div>keydown</div>';
});

inputBox.addEventListener('keyup', () => {
    result.innerHTML += '<div>keyup</div>';
});

btnClear.addEventListener('click', () => {
    result.innerHTML = '';
});

13-1-2-3. 포커스 이벤트

아이디: <input type="email" id="input">
      
<div id="error"></div>

input.onblur = function() {
    if (!input.value.includes('@')) { // @ 유무를 이용해 유효한 이메일 주소인지 확인
        input.classList.add('invalid');
        error.innerHTML = '이메일 형식이 올바르지 않습니다.';
    }
}
      
input.onfocus = function() {
    if (this.classList.contains('invalid')) {
       // 유저가 새로운 값을 입력하기위해 경고 문구를 지움
        this.classList.remove('invalid');
        error.innerHTML = "";
    }
}

13-2. 이벤트 핸들러

13-2-1. 이벤트 핸들러

13-2-2. 이벤트 핸들러 등록

13-2-2-1. 이벤트 핸들러 속성 방식

<h1 onmouseover="handleSize('크게')">이벤트 핸들러를 배워봅시다.</h1>

function handleSize(크기) {
    console.log(`글자가 ${크기} 변경되었습니다.`);
}

<p onclick="console.log('클릭'); console.log('했죠?');">안녕하세요.</p>

13-2-2-2. 이벤트 핸들러 프로퍼티 방식

<h1>제목입니다.</h1>

const h1 = document.querySelector('h1');
h1.onclick = function () {
    console.log('클릭했습니다.');
};

<h1>제목입니다.</h1>

const h1 = document.querySelector('h1');
h1.onclick = function () {
	console.log('클릭했습니다 1');
};

h1.onclick = function () {
	console.log('클릭했습니다 2');
};

13-2-2-3. addEventListener 메서드 방식

<h1>제목입니다.</h1>

const h1 = document.querySelector('h1');
h1.addEventListener('click',function () {
	console.log('클릭했습니다.');
});

// addEventListener(이벤트 타입, 이벤트 핸들러, 이벤트 전파단계)

<button>클릭하세요!</button>

const btn = document.querySelector('button');
btn.addEventListener('click',function () {
	console.log('클릭했어요! 1');
});

btn.addEventListener('click', function () {
	console.log('클릭했어요! 2');
});

13-2-3. 이벤트 핸들러 제거

<button>클릭하세요!</button>

const btn = document.querySelector('button');
const handleClick = function () {
	console.log('클릭!');
}
btn.addEventListener('click', handleClick);
// addEventListener 메서드를 이용하여 이벤트 핸들러를 등록한다.

btn.removeEventListener('click', handleClick);
// removeEventListener 메서드를 이용하여 이벤트 핸들러를 제거한다.
btn.removeEventListener('click', handleClick, true);
// addEventListener 메서드에 전달한 인수와 다른 인수를 사용해서 이벤트 핸들러가 제거되지 않는다.

13-3. 이벤트 객체

13-3-1. 이벤트와 이벤트 객체

<button>클릭!</button>

const btn = document.querySelector("button");
btn.onclick = function (event) {
    console.log("클릭되었습니다.");
		console.log(event);
}

1. 마우스로 버튼을 클릭하면 브라우저는 클릭을 감지한다.

2. 이에 따라 발생한 클릭 이벤트의 정보를 담은 이벤트 객체가 생성되고 생성된 객체는 13-4. 이벤트 전파에서 설명할 원리에 따라 클릭이 발생한 요소(button)로 보내지게 된다.

3. button으로 클릭 이벤트의 정보를 담은 이벤트 객체가 보내지면 button의 이벤트 핸들러가 클릭 이벤트가 발생했음을 인지하고 이벤트 핸들러 함수를 수행한다.

4. 이벤트 핸들러 함수가 수행되는 동안 “클릭되었습니다”가 출력되고 event라는 이름으로 받은 이벤트 객체를 콘솔에 출력한다.

5. 마우스로 버튼을 클릭하면 브라우저는 클릭을 감지한다.

6. 이에 따라 발생한 클릭 이벤트의 정보를 담은 이벤트 객체가 생성되고 생성된 객체는 13-4. 이벤트 전파에서 설명할 원리에 따라 클릭이 발생한 요소(button)로 보내지게 된다.

7. button으로 클릭 이벤트의 정보를 담은 이벤트 객체가 보내지면 button의 이벤트 핸들러가 클릭 이벤트가 발생 했음을 인지하고 이벤트 핸들러 함수를 수행한다.

8. 이벤트 핸들러 함수가 수행되는 동안 “클릭되었습니다”가 출력되고 event 라는 이름으로 받은 이벤트 객체를 콘솔에 출력한다.

// 인라인 방식으로 event 객체 받아오기
<button onclick="handleClick(event)">클릭!</button>

13-3-2. 이벤트 객체의 다양한 종류

    <button>클릭!</button>

const btn = document.querySelector("button");

btn.onmousedown = function (event) {
    console.log(event);
}
btn.onmouseup = function (event) {
    console.log(event);
}
btn.onclick = function (event) {
    console.log("클릭되었습니다.");
    console.log(event);
}

1. 이벤트 객체의 종류는 이벤트 타입에 따라 달라진다.

2. 유사한(서로 관계가 있는) 이벤트들은 같은 이벤트 객체를 이용하여 이벤트 정보를 나타낼 수 있다.

13-3-3. 이벤트 객체 구조

// click 타입 이벤트 객체를 생성, Event()의 인자로 event의 타입을 넘겨준다.
const eventObject = new Event("click");
console.log(eventObject);

13-3-4. 파생 인터페이스와 상속 구조

13-3-5. 간단한 이벤트 객체 사용 예시

• 이벤트가 발생하면 관련된 정보를 전달하기 위해 이벤트 객체를 생성한다.

• 생성된 이벤트 객체는 관련 이벤트를 처리하는 이벤트 핸들러 함수의 인자로 전달되어 효율적인 이벤트 처리를 돕는다.

• 다양한 이벤트의 종류가 있는 것처럼 다양한 종류의 이벤트 객체가 생성된다.

• 생성되는 모든 이벤트 객체는 Event 인터페이스라는 규정을 따른다.

• Event 인터페이스만으로는 다양한 이벤트에 필요한 모든 정보를 담을 수 없기 때문에 Event 인터페이스를 상속하는 파생 인터페이스를 통해 필요한 더 많은 정보를 담은 이벤트 객체를 생성한다.

• Event 인터페이스뿐만 아니라 파생 인터페이스 사이에도 공통된 기능들을 효율적으로 코드로 구현하기 위해 상속 구조로 각각의 인터페이스들이 연결된다.

13-3-5-1. 마우스 체이서 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Animation</title>
    <style>
        * {
            margin: 0;
        }
        body {
            background-color: #3d5a80;
        }
        .circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #ee6c4d;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="circle"></div>

    <!-- JavaScript 코드 -->
    <script>
    </script>
</body>
</html>

const circle = document.querySelector(".circle");

document.addEventListener("mousemove", (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    circle.style.left = mouseX + 'px';
    circle.style.top = mouseY + 'px';
});

13-4. 이벤트 전파

GitHub - jisu2433/js_book_example

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/jisu2433/js_book_example

💡

eventPhase란? eventPhase는 읽기 전용 속성으로 현재 평가 중인 이벤트 흐름 단계를 나타낸다.

1. capturing : 1번

2. target : 2번

3. bubbling : 3번

Event.eventPhase - Web API | MDN

Event 인터페이스의 eventPhase 읽기 전용 속성은 현재 평가 중인 이벤트 흐름 단계를 나타냅니다.

https://developer.mozilla.org/ko/docs/Web/API/Event/eventPhase

<ul id="flowers">
	<li id="rose">Rose</li>
	<li id="freesia">Freesia</li>
	<li id="carnation">Carnation</li>
</ul>         

const flowers = document.getElementById('flowers');
const rose = document.getElementById('rose');

// li 요소를 클릭한 경우
flowers.addEventListener('click', event =>{
	console.log(`${event.eventPhase}`); // 1 캡처링 단계
	console.log(`${event.target}`); //  [object HTMLLIElement]
	console.log(`${event.currentTarget}`); // [object HTMLUListElement]
}, true);

rose.addEventListener('click', event =>{
	console.log(`${event.eventPhase}`); // 2 타깃 단계
	console.log(`${event.target}`); //  [object HTMLLIElement]
	console.log(`${event.currentTarget}`); // [object HTMLUListElement]
});

flowers.addEventListener('click', event =>{
	console.log(`${event.eventPhase}`); // 3 버블링 단계
	console.log(`${event.target}`); //  [object HTMLLIElement]
	console.log(`${event.currentTarget}`); // [object HTMLUListElement]
});

13-4-1. 버블링

<div class="box1">
	box1
	<div class="box2">
		box2
		<div class="box3">
			box3
		</div>
	</div>
</div>

const boxes = document.querySelectorAll('div');
	boxes.forEach(function(div) {
	div.addEventListener('click', boxEvent);
	});

function boxEvent(event) {
	console.log(event.currentTarget.className);
}

13-4-2. 캡처링

<div class="box1">
	box1
	<div class="box2">
		box2
		<div class="box3">
			box3
		</div>
	</div>
</div>

const boxes = document.querySelectorAll('div');
boxes.forEach(function(div) {
	div.addEventListener('click', boxEvent, {
		capture: true // 캡처링을 동작하게 하는 옵션
	});
});

function boxEvent(event) {
	console.log(event.currentTarget.className);
}

13-4-3. 버블링과 캡처링이 혼용되는 경우

<style>
	html, body { height: 100%;}
</style>
<body>
	body입니다.
	<div>
		div입니다.
		<p>
	    p입니다.
    </p>
  </div>
</body>

// 버블링 단계
document.body.addEventListener('click', () => {
	console.log('Body element event handler');
});

// 캡처링 단계
document.querySelector('div').addEventListener('click', () => {
	console.log('Div element event handler');
}, true);

// 타깃 단계
document.querySelector('p').addEventListener('click', () => {
	console.log('P element event handler');
});         

13-5. 이벤트 전파 방지 방법

13-5-1. preventDefault()

<a href="https://www.naver.com">NAVER</a>

document.querySelector('a').onclick = e => {
	event.preventDefault();
};

13-5-2. stopPropagation()

<div id="div">
	div입니다.
	<p id="p">
		p입니다.
		<a href="https://www.naver.com" id="a">NAVER</a>
	</p>
</div>

const div = document.getElementById('div');
const p = document.getElementById('p');
const a = document.getElementById('a');

div.addEventListener('click', () => {
	console.log('div 클릭');
});

p.addEventListener('click', () => {
 event.stopPropagation(); // 이벤트 전파 중지
 console.log('이벤트 전파 중지의 p 클릭');
});

p.addEventListener('click', () => {
	console.log('p 클릭');
});
	
a.addEventListener('click', () => {
	console.log('a 클릭');
});
      

13-5-3. stopImmediatePropagation()

<div id="div">
	div입니다.
	<p id="p">
		p입니다.
		<a href="https://www.naver.com" id="a">NAVER</a>
	</p>
</div>

const div = document.getElementById('div');
const p = document.getElementById('p');
const a = document.getElementById('a');

div.addEventListener('click', () => {
	console.log('div 클릭');
});

p.addEventListener('click', () => {
	event.stopImmediatePropagation(); // 이벤트 전파 중지
	console.log('이벤트 전파 중지의 p 클릭');
});

p.addEventListener('click', () => {
	console.log('p 클릭');
});

a.addEventListener('click', () => {
	console.log('a 클릭');
});

13-6. 이벤트 위임

<ul id="flowers">
	<li id="rose" class="active">Rose</li>
  <li id="whiterose">whiterose</li>
	<li id="freesia">Freesia</li>
	<li id="carnation">Carnation</li>
</ul>
<div>선택한 꽃 : <b class="msg"></b></div>

const flowers = document.getElementById('flowers');
const msg = document.querySelector('.msg');

function activate({target}) {
        
[...flowers.children].forEach(flowers => {
flowers.classList.toggle('active', flowers === target);
msg.textContent = target.id;
});
}

document.getElementById('rose').onclick = activate;
document.getElementById('freesia').onclick = activate;
document.getElementById('carnation').onclick = activate;

<ul id="flowers">
	<li id="rose" class="active">Rose</li>
	<li id="whiterose">whiterose</li>
	<li id="freesia">Freesia</li>
	<li id="carnation">Carnation</li>
</ul>
<div>선택한 꽃 : <b class="msg"></b></div>

const flowers = document.getElementById('flowers');
const msg = document.querySelector('.msg');

function activate({target}) {
	if(!target.matches('#flowers > li')) return;
        
[...flowers.children].forEach(flowers => {
	flowers.classList.toggle('active', flowers === target);
  msg.textContent = target.id;
});
}

flowers.onclick = activate;

References

1. https://dom.spec.whatwg.org/#dom-event-target

2. https://developer.mozilla.org/ko/docs/Web/API/EventTarget

3. https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events#see_also

4. https://www.quirksmode.org/js/events_access.html

5. https://developer.mozilla.org/ko/docs/Web/API/Event

6. https://ko.wikipedia.org/wiki/덕_타이핑

7. https://developer.mozilla.org/ko/docs/Web/API/Event/eventPhase

8. https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events

9. https://developer.mozilla.org/ko/docs/Web/API/Event