Event란?

이벤트란 간단하게 일어나는 사건 혹은 발생인데, 웹에서는 유저가 버튼을 클릭하거나 비디오 재생이 멈추는 등 이러한 다양한 사건들을 이벤트라고 할 수 있습니다.

Event Bubbling이란?

Event Bubbling이란 한 요소에서 이벤트가 발생했을 때 해당 이벤트가 부모 요소들로 전달되어 가는 특성을 말합니다.

<form onclick="alert('form')">
	form
	<div onclick="alert('form 안에 있는 div')">
		form 안에 있는 div
		<p onclick="alert('form 안에 있는 div 안에 있는 p')">
			form 안에 있는 div 안에 있는 p
		</p>
	</div>
</form>

이 경우 p태그 안에 요소만을 클릭해도 p의 이벤트 핸들러가 동작해 alert 창이 뜨고 클릭한 이벤트가 부모 요소들로 전달되어 div, form 각각의 이벤트 핸들러가 동작해 div의 alert 창이 뜨고, form의 alert 창의 뜸을 알 수 있습니다. 이러한 흐름을 Event Bubbling이라고 합니다.

화살표 함수

기존의 익명함수

const add = function() {
};

화살표 함수

const add = () => {
};

이 화살표 함수는 기존의 익명 함수의 장점이었던

재사용이 필요 없다.
메모리 관리 측면에서 효과적이다.

이러한 특징에 더해 익명 함수보다 짧고 return도 생략이 가능해졌습니다.

let sum = function(a, b) {
	return a + b;
};
//--==>> 화살표 함수
let sum = (a, b) => a + b;

기존 익명 함수의 장점을 좀 더 설명해보면, 일반 함수는 재사용을 하기 위해 사용합니다. 만약 ‘더하는 행위’를 할 때마다 더하는 식을 작성하는 게 아니라 ‘더하기 함수’를 호출하면 되고 이러한 재사용을 위해 일반 함수를 사용합니다. 하지만 익명 함수는 재사용이 필요 없는 경우여서 이름을 붙여 놓지 않고 한 번만 사용하고 끝이 납니다.