Javascript Event

🤔Event를 알아야 하는 이유

• 동적인 웹은 사용자와 상호작용이 잘 되어야겠죠?

• 그 상호작용은 어떤 이벤트에 의해 발생합니다.

---

🎉 Event

• 이벤트는 어떤 사건을 의미해요.

• 웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록합니다.

• 때

  • 클릭했을 때 / 스크롤 했을 때 / 텍스트를 입력했을 때

---

😃이벤트의 종류

• 사용자의 이벤트를 다루기 위해서는 먼저, 이벤트의 종류에 대해 알아야합니다.

• 아마 이벤트의 이름들을 보면 어떤 이벤트인지 바로 느낌이 오실 거예요.

🤝사용자 인터페이스 이벤트

• 브라우저가 로드한 HTML페이지가 아닌 브라우저 창을 사용할 때 발생하는 이벤트입니다.

• load / unload / error / resize / scroll

⌨️키보드 이벤트

• keypress / keydown / keyup

🖱️마우스 이벤트

• click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout

🔍focus, blur 이벤트

• focus/focusin , blur/focusout

---

👂이벤트 리스너(Event Listener)

function onAddStationHandler() {
	// 이벤트 처리 로직
}
$stationAddButton.addEventListener('click', onAddStationHandler); 

이 때 괄호를 생략하는 이유는??

• 괄호 쓰면 뭐예요 👉 즉시 호출해버리잖아요ㅎㅎ 알면서!

• 괄호를 사용하면 (이벤트가 발생할 때가 아니라) 이벤트가 바인딩 될 때 함수를 호출하라는 의미가 되기 때문입니다.

• 따라서, 괄호를 쓰지 않아야 이벤트 발생 시에 호출되어요.

---

🙌매개변수를 가진 이벤트 핸들러와 리스너

• 괄호를 쓰면 바로 실행 된다면서요ㅠㅠ 그럼 매개변수는 어떻게 해요..

• 그래서 매개변수를 전달하고 싶다면 아래와 같은 형태의 익명함수를 이용해야해요.

function onAddStationHandler() {
	// 이벤트 처리 로직
}

$stationAddButton.addEventListener('blur', function() { 
  // 익명함수는 두 번째 매개변수처럼 동작하며, 이름을 가진 함수를 둘러 쌉니다.
  onAddStationHandler(name);
})

---

📖Event 객체

• Event 객체는 이벤트가 발생했을 때 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공해요.

• 예를 들면 요소는

  • keypress 이벤트가 어떤 키에 의해 발생했는지에 대한 정보
  • 사용자가 어떤 요소를 클릭해서 click 이벤트가 발생했는지에 대한 정보
  • 이런 것들이 있겠죠

• 이벤트 객체는 이벤트 리스너로 지정된 함수에 자동으로 전달됩니다.

속성이 있어요.

• target : 이벤트가 발생한 요소

• type : 발생한 이벤트의 종류

메소드가 있어요.

• preventDefault

  • 이벤트의 기본 동작을 취소해요.
  • (링크를 클릭하거나 폼을 제출하는 것과 같은) 몇 가지 이벤트들은 사용자에게 새로운 페이지로 이동을 강제하는데요!
  • 이런 요소들의 기본 동작을 중단하기 위해서 사용합니다.
  • 예를 들어 사용자가 링크를 클릭하거나 폼을 제출해도 계속 같은 페이지에 머무르게 하려는거죠!
  • 새로 고침 방지 비슷하다고 생각하시면 될 것 같아요.

• stopPropagation()

  • 이벤트의 캡처링이나 버블링을 중단해요.
  • 이벤트가 부모 요소로 버블링되는 것을 중단하고 싶을 수 있어요.
  • 이벤트 버블링을 중단하려고 할 때 사용해요.

---

• TIP : 브라우저의 콘솔창을 키고, event 버튼을 클릭했을 때와, text를 입력했을 때 콘솔 창에 기록되는 event 객체를 확인해보세요.

---

🏳️이벤트 위임

• 이벤트 리스너를 지정하는 요소가 많으면 많을수록 페이지의 실행 속도는 느려집니다.

• 효율적으로 이벤트를 관리하기 위해서 이벤트의 흐름을 이용합니다.

• 이벤트는 이벤트가 발생한 요소를 포함하고 있는 부모 요소에도 영향을 미치기 때문에 자식 요소를 포함할 수 있는 요소에 이벤트 핸들러를 지정하고 이벤트의 흐름을 이용해 다룰 수 있습니다.

쉽게 말해 👉 의도적으로 해당 요소가 아니라 부모에게 이벤트를 걸어 버리는 겁니다.

• 이벤트 리스너가 실행할 작업을 요소의 부모 요소에게 위임(Delegation)할 수 있다는 것입니다.

이벤트 위임의 장점들

• 동적으로 추가되는 요소들에도 동작해요.

  • DOM트리에 새로운 요소를 추가하더라도 이벤트에 대한 처리는 부모 요소에게 위임되었기 때문에 새로운 요소에 이벤트 핸들러를 다시 지정할 필요가 없어요.
  • 제가 우테코 4기 프리코스에서 많이 실수했었던 부분인데 일부러 부모 요소를 잡으면 해결할 수 있었겠네요.

• 코드 간결

  • 이 기법을 이용하면 함수를 많이 작성할 필요가 없으며 DOM과 코드간의 연결이 간소해져 결과적으로 유지보수에 도움이 된다.

---

• 예를 들어볼게요.

<ul id="parent-list">
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
    <li id="item3">Item 3</li>
</ul>

// 상위 노드에 이벤트 설정 
document.getElementById("parent-list").addEventListener("click", function (e) {
	 // 클릭된 부분이 존재하고 태그이름이 li라면~!
   if (e.target && e.target.nodeName == "LI") {
      console.log(`List item  ${e.target.id} was clicked!`);
    }
 });

---

• 알고 있던 내용이 많았지만 이벤트 위임에 대해서는 새롭게 깨닫고 가는 것 같아요.