이벤트

이벤트의 동작방식

• WebAPI로 브라우저에게 이벤트 처리를 위임함으로서 동작한다

• 이벤트가 등록되면 브라우저가 감지하여 이벤트 발생시 콜백함수를 돌려주게 되고, 매크로 태스크 큐에 쌓여 있다가 콜스택으로 이동하여 실행된다 (자바스크립트의 싱글스레드 동작 )

• 자바스크립트 이벤트는 3가지 방법으로 처리된다

//1 어트리뷰트 방식
// 참조 방식이 아니라 호출방식이다
// 해당 코드로 그대로 함수로 생성하기 때문이다

<input type="checkbox" onclick="handleClick('hi')" />


//2 프로퍼티 방식
// 모든 DOM 요소는 event 핸들러 프로퍼티를 가지고 있다

button.onclick = function (){
	handleClick('hi')
}


//3 이벤트 리스너 방식
// 최근이며 가장 권장 됨

button.addEventListenr('click', function () {
	console.log(this) //=> button
}


//프로퍼티, 이벤트 리스너 방식의 this는 객체DOM을 가리킨다

• 바닐라 자바스크립트의 이벤트는 캡쳐링 → 타겟 → 버블링 단계를 거치면 전파 된다

• 이벤트 핸들러 프로퍼티/어트리뷰트 방식은 타깃과 버블링 단계의 이벤트만 캐치할 수 있다

이벤트 전파

• DOM에서 이벤트 발생 시에, window객체에서 시작하여 target DOM으로 전파(캡쳐링)되었다가 다시 window객체(버블링)로 전파된다

이벤트 위임

// 이벤트 감지를 위한 모든 요소에 이벤트 핸들러를 다는 것은 바보다
<ul>
	<li onclick="handleclick()">선택될 용사1<li>
	<li onclick="handleclick()">선택될 용사2<li>
	<li onclick="handleclick()">선택될 용사3<li>
  <li onclick="handleclick()"> ... <li>
  <li onclick="handleclick()"> ... <li>
<ul>


// 이벤트 전파(ex버블링)을 이용하여 하나의 요소에만 이벤트 리스너를 단다
const ul = document.querySelector('ul')

ul.addEventListenr('click', () => {
	handleClick()
}


// 하지만 선택 되길 원하지 않는 요소가 있을 경우엔 제외하는 코드 추가
<ul>
	<li onclick="handleclick()">선택될 용사1<li>
	<li onclick="handleclick()">선택될 용사2<li>

	<li class="devil" onclick="handleclick()">선택될 악마<li>

  <li onclick="handleclick()">선택될 용사3<li>
  <li onclick="handleclick()"> ... <li>
<ul>

<script>
const ul = document.querySelector("ul");

function handleClick() {
  console.log("잘 오셨습니다 용사여");
}

ul.addEventListener("click", (e) => {
  const devil = e.target.matches(".devil");
  if (devil) {
    e.preventDefault();
    return;
  }

  handleClick();
});
</script>

리액트의 이벤트는 어떻게 동작하는가?

eventTarget vs eventCurrentTarget

stopPropagation vs stopImmediatePropagation

추가