JS - Events

이바덕·2024년 2월 6일

events 멋쟁이사자처럼 버블링 자바스크립트 캡처링

Javascript 이론

목록 보기

10/12

📌Events란?

사용자의 액션이나 브라우저 자체에서 방생하는 사건을 나타냅니다.

🔎 브라우저 이벤트
🔎 버블링과 캡처링

📝브라우저 이벤트

위에서 말했던것처럼 웹 페이지에서 발생하는 사용자 액션 또는 브라운저 자체에서 발생하는 사건입니다.

이벤트를 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler)를 할당해야 합니다.

이벤트 핸들러는 3가지 방법이 있는데 아래와 같습니다.

HTML 속성 : 태그 중간에 들어감.

<input value="클릭해 주세요." onclick="alert('클릭!')" type="button">
//여기서 주의 해야할점은 html에 들어가는 이벤트는 함수를 '실행' 하고 적어야함.

DOM 프로퍼티 : 함수로 만들어지며 복수의 핸들러 할당이 불가능.

<input type="button" id="button" value="클릭해 주세요.">
<script>
  button.onclick = function() { //onclick 프로퍼티는 단 하나 밖에 없기때문에 복수이벤트 불가능.
    alert('클릭!');
  };
</script>

3 .메서드: 메서드가 가장 사용하기 유연하지만 코드가 가장 길다고 합니다. 복수 가능

element.addEventListener(event, handler, [options]); //이벤트 만들기

element.removeEventListener(event, handler, [options]); // 이벤트 지우기

메서드를 사용해 이벤트를 만들때 주의해야 할 것이 있는데요 아래와 같습니다.

// 삭제 불가능 아래 코드는 그저 함수 두개를 만든 상황일뿐.
elem.addEventListener( "click" , () => alert('감사합니다!'));
// ....
elem.removeEventListener( "click", () => alert('감사합니다!'));

//위에 코드를 아래처럼 고쳐야 이벤트가 삭제됨.
function handler() {
  alert( '감사합니다!' );
}

input.addEventListener("click", handler);
// ....
input.removeEventListener("click", handler);

//변수에 핸들러 함수를 저장해 놓지 않으면 핸들러를 지울 수 없다.
//이렇게 하지 않으면 addEventListener로 할당한 핸들러를 ‘불러올’ 수 없습니다.

어떤 방법으로 이벤트 핸들러를 할당하던, 첫 번째 인자는 이벤트 객체 입니다. 이벤트 객체는 어떤 일이 일어났는지에 대한 상세한 정보를 담고 있습니다.

📝버블링과 캡쳐링

버블링
한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

간단하게 아래 같은 상황을 예시로 두면

클릭시 p만 클릭하는게 아니라 밑에 body 까지 푹찍고 옴, 이런 상황을 버블링이라고 함.

event.target | event.currentTarget

event.target은 실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않습니다.
this(=e.currentTarget)는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조합니다.

이것도 간단하게 요약하자면 위에 예시 사진에서 e.target은 저 손가락이 가장 먼저 닿는 부분이고 e.currentTarget 이벤트의 대상이라고 생각하면 됩니다. 그리고 this(=e.currentTarget) 뜻은 this는 실행시킨 대상을 가르키기때문에 e.currentTarget와 같다는 의미입니다.

e.stopPropagation

이벤트의 전파를 중단합니다. 이 부분은 이벤트가 상위 요소로 계속 전파되지 않도록 막는 역할을 합니다.

p.addEventListener('click', (e) => {
  e.stopPropagation(); //addEventListener를 통해 발생 시킨 이벤트 중지.
  console.log('%c p', 'color:hotpink');
});           //%c : 로그에 스타일을 적용하기 위한 특수한 문자열입니다 

//<p> 요소가 클릭되었을 때 이벤트가 상위로 전파되지 않도록 막고, 콘솔에 'p'라는 로그 메시지를 출력합니다.
//이를 통해 이벤트 전파를 조절하여 다른 부모 요소들의 클릭 이벤트에 영향을 주지 않도록 하고 있습니다.