[JavaScript] Event

혜혜·2024년 11월 18일

Event JavaScript

JavaScript

목록 보기

9/9

💡 핵심

📌 개념

프로그래밍 하고 있는 시스템에서 일어나는 사건(action) 또는 발생(occurrence)

이것들에 어떤 방식으로 응답할 수 있도록 시스템이 말해주는 개념
시스템은 이벤트가 발생될 때 신호를 발생시킴 → 이벤트가 발생되었을 때 액션이 자동적으로 취해질 수 있는 매커니즘 제공
이벤트 종류는 Event reference 참고

이벤트 핸들러(event handler) : 이벤트가 발생되면 실행되는 코드 블럭
핸들러가 이벤트에 응답해서 실행되기 위해 정의되었을 때, 이벤트 핸들러를 등록(register)했다고 함

📌 이벤트를 사용하는 방법

1. 이벤트 핸들러 프로퍼티

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

btn.onclick = function () {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
};

2. 인라인 이벤트 핸들러 → 되도록 쓰지 말자

<button onclick="bgChange()">Press me</button>

function bgChange() {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
}

인라인으로 이벤트 핸들러 함수를 지정하는 방식
하나의 파일이더라도, 인라인 이벤트 핸들러는 좋지 않음
요소가 여러 개라면 어트리뷰트를 계속 더해야 하고, 유지보수에 안 좋을 수 있음

const buttons = document.querySelectorAll("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}

3. addEventListener() 메서드 사용

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

function bgChange() {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener("click", bgChange);

📌 `addEventListener()`와 이벤트 핸들러 프로퍼티의 차이

addEventListener() : 이벤트 핸들러가 계속 추가되는 개념
이벤트 핸들러 프로퍼티 : 이벤트 핸들러가 갈아 끼워지는 개념

📌 이벤트 객체

추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 객체

function bgChange(e) {
  const rndCol =
    "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener("click", bgChange);

이벤트 객체의 target 프로퍼티 : 항상 이벤트가 발생된 요소에 대한 참조

📌 event `target`과 `currentTarget`의 차이

currentTarget : 이벤트 핸들러가 부착된 요소
target : 실제 이벤트가 발생하는 요소

📌 기본 행동 방지하기

<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text" />
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text" />
  </div>
  <div>
    <input id="submit" type="submit" />
  </div>
</form>
<p></p>

텍스트 필드가 비었다면 양식 제출을 멈추기 위한 함수를 호출해 보자

const form = document.querySelector("form");
const fname = document.getElementById("fname");
const lname = document.getElementById("lname");
const para = document.querySelector("p");

form.onsubmit = function (e) {
  if (fname.value === "" || lname.value === "") {
    e.preventDefault();
    para.textContent = "You need to fill in both names!";
  }
};

'제출'이라는 원래의 액션을 없애고 프로그래머가 원하는 액션을 수행

📌 이벤트 버블링과 캡처링

두 이벤트 핸들러가 한 요소에 작동되었을 때 무슨 일이 일어나는지를 기술하는 매커니즘

버블링과 캡처링은 반대 개념

1. 버블링

브라우저는 선택된 요소가 버블링 단계에 대해 그것에 등록된 이벤트 핸들러를 가지고 있는지 확인하기 위해 검사하고, 만약 그렇다면 실행
그리고서 바로 다음의 조상 요소로 이동하고 같은 일을 하고, 그리고서 그 다음 요소로 이동하고... <html> 요소에 닿을 때까지 계속함

2. 캡처링

브라우저는 요소의 가장 바깥쪽 조상(<html>)이 캡처링 단계에 대해 그것에 등록된 이벤트 핸들러가 있는지 확인하기 위해 검사하고, 만약 그렇다면 실행함
그리고서 <html> 내부에 있는 다음 요소로 이동하고 같은 일을 하고, 그리고서 그 다음 요소로 이동하고... 실제로 선택된 요소에 닿을 때까지 계속함

이벤트 버블링 및 캡처링을 차단하려면 event.stopPropagation() 사용

📌 이벤트 위임 (Event delegation)

만약 다수의 자식 요소 중 하나를 선택했을 때 코드를 실행하기를 원한다면,
모든 자식에 개별적으로 이벤트 리스너를 설정해야만 하는 것 대신에,
이벤트 리스너를 그들의 부모에 설정하고 그들에게서 일어난 이벤트가 부모에게까지 올라오게 할 수 있다는 사실에 의존

버블링을 통해서 이벤트가 부모 요소에까지 올라오는 걸 이용하는 방법

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

이런 요소에서 li를 눌렀을 때 이벤트가 동작할 수 있게 하고 싶다면?
li 태그에 일일이 이벤트 핸들러를 추가하는 건 좋은 방법이 아닐 수 있다!

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function(e) {
	// e.target is the clicked element!
	// If it was a list item
	if(e.target && e.target.nodeName == "LI") {
		// List item found!  Output the ID!
		console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
	}
});