17. 이벤트

17-1. 이벤트 기본 개념

17-1-1. 이벤트의 의미와 중요성

17-2. 이벤트 핸들링

17-2-1. 이벤트 리스너 등록 및 삭제

• 이벤트리스너 등록하는 메서드 element.addEventListener(eventType, eventListener)

<button id='btn'>Click</button>

<script>
		const btn = document.getElementById('btn');
		
		btn.addEventListener('click',() => {
		    alert('버튼이 클릭 되었습니다.');
		})
</script>

• 이벤트리스너 제거하는 메서드 element.removeEventListener(eventType, eventListener)

const btn = document.getElementById('btn');
		
function btnClick() {
    alert('버튼이 클릭 되었습니다.');
};

btn.removeEventListener('click', btnClick);

17-2-2. 이벤트 타입과 발생 조건

• 클릭 이벤트 (click Event)

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

// 클릭 이벤트 핸들러 등록
btn.addEventListener('click', () => {
    alert('버튼이 클릭 되었습니다.');
});

• 마우스 이벤트 (mouse Event)

const myDiv = document.getElementById('myDiv');

// 마우스 오버 이벤트
myDiv.addEventListener('mouseenter', () => {
    myDiv.textContent = '마우스가 위에 있어요!';
});

// 마우스 아웃 이벤트
myDiv.addEventListener('mouseleave', () => {
    myDiv.textContent = '마우스를 올려보세요';
});

• 키보드 이벤트 (keyboard Event)

const input = document.querySelector('input');
const result = document.querySelector('div');

// 키보드 입력 이벤트 핸들러 등록
input.addEventListener('keyup', (event) => {
    result.textContent = '입력한 내용' + event.target.value;
});

• 폼 이벤트 (form Event)

• 포커스 이벤트 (focus Event)

17-2-3. HTML 속성과 JavaScript를 활용한 이벤트 핸들링

• onclick 이벤트

<button class='btn' onclick='btnClick()'>click !</button>

<script>
		function btnClick() {
		    alert('Hello !');
		};
</script>

• onchange 이벤트

<input type='text' onchange='textChange()'>

<script>
		const textChange = () => {
		    const value = document.querySelector('input').value;
		    console.log(value);
		};
</script>

• onsubmit 이벤트

<form onsubmit='check()'>
		<input type='text'>
		<input type='submit'>
</form>

17-3. 이벤트 객체와 정보 활용

17-3-1. 이벤트 타겟과 현재 요소 파악

• 이벤트 객체의 ‘type’ 속성 event.type

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

div.addEventListener('click',(event)=>{
    console.log(event.type); 
		// click
});

• 이벤트 객체의 ‘target’ 속성 event.target

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

div.addEventListener('click',(event)=>{
    console.log(event.target); 
		// <div></div>
});

• 이벤트 객체의 ‘currentTarget’ 속성 event.currentTarget

<div class='parent'>
    <p class='child'>안녕하세요.</p>
</div>

<script>
		const parent = document.querySelector('.parent')

    parent.addEventListener('click',(event)=>{
		console.log(event.target); // ul요소
    console.log(event.currentTarget); // 클릭한 li 요소
		});
</script>

17-3-2. 기본 동작 제어와 이벤트 전파 이해

• 해당 이벤트에 대한 기본동작을 실행하지 않는 방법 preventDefault() 메서드

<form action=''>
    <button type='submit' class='submit'>제출</button>
</form>

<script>
		const myForm = document.querySelector('form');
		
		myForm.addEventListener('submit', (e)=>{
		    e.preventDefault();
		});
</script>

• 해당 이벤트가 상위 요소의 이벤트 전파를 막는 방법 stopPropagation() 메서드

<div id='container'>
		<button id='myButto'>버튼 클릭</button>
</div>

<script>
		const button = document.getElementById('myButton');
		const container = document.getElementById('container');
		
		button.addEventListener('click', function(event) {
		  alert('버튼이 클릭 되었습니다.');
		  event.stopPropagation(); // 이벤트 전파 중단
		});
		
		container.addEventListener('click', function() {
		  alert('컨테이너가 클릭 되었습니다.');
		});
</script>

17-4. 이벤트 위임 패턴

17-4-1. 이벤트 위임 패턴 개념 및 장점

1. 메모리 효율성: 각 하위 요소에 이벤트 핸들러를 등록하는 대신 상위 요소에 하나의 이벤트 핸들러만 등록하므로 메모리 사용량을 줄일 수 있다.

2. 유지보수 용이: 동적으로 추가되거나 제거되는 요소에 대해서도 이벤트를 처리할 수 있다. 이벤트 위임을 사용하면 새로운 요소가 나타날 때마다 핸들러를 다시 등록할 필요가 없이 자동으로 적용되어 유지보수가 편리하다.

3. 단순한 코드 구조: 함수를 사용하여 많은 하위 요소에 대한 복잡한 이벤트 핸들러 관리 코드를 간결하고, 단순화할 수 있다.

4. 브라우저 호환성: 다양한 브라우저(Chrome, Firefox, Safari, Internet Explorer, Edge 등)는 각각 고유한 이벤트 모델을 가지고 있어 이 때문에 이벤트 처리 코드가 각 브라우저에 따라 다를 수 있다. 이벤트 위임을 사용하면 같은 코드로 다양한 브라우저에서 일관된 동작을 보장할 수 있다.

17-4-2. 이벤트 버블링과 캡처링

• 이벤트 버블링

<ul id='itemList'>
		<li>리스트 1</li>
		<li>리스트 2</li>
		<li>리스트 3</li>
		<li>리스트 4</li>
		<li>리스트 5</li>
</ul>

const itemList = document.getElementById('itemList');

// 목록 리스트 클릭 이벤트를 처리하는 함수
function handleItemClick(event) {
		const clickedItemText = event.target.textContent;
		console.log('클릭 된 항목' + clickedItemText);
};

// 목록 컨테이너에 클릭 이벤트 핸들러를 등록
itemList.addEventListener('click', handleItemClick);

• 이벤트 캡처링

• 캡처 단계 (Capture Phase): 이벤트가 최상위(루트) 요소에서 시작하여 타겟 요소까지 이벤트 캡처 단계 동안 이벤트 핸들러를 호출한다.

• 타겟 단계 (Target Phase): 이벤트가 실제 타겟 요소에서 발생하고 이벤트 핸들러를 호출한다.

• 버블링 단계 (Bubbling Phase): 이벤트가 타겟 요소에서 시작하여 최상위(루트) 요소까지 버블링 단계 동안 이벤트 핸들러를 호출한다.

element.addEventListener('click', myFunction, true); // true는 캡처링을 활성화