JavaScript의 Event - 4월 6일 발표

개요

이번주는 자바 코딩하던 중 보게 된 미디엄 글을 보고 정리하며 추가적으로 궁금한 점에 대해 덧붙여 정리하였다.

https://javascript.info/introduction-browser-events#object-handlers-handleevent

https://medium.com/geekculture/event-handlers-vs-event-listeners-in-javascript-b4086b8040b0

https://developer.mozilla.org/en-US/docs/Web/Events

 

내용

event 란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미.

버튼을 클릭하면 모달을 표시하여 이벤트에 응답할 수 있게 하는 것 등이 예시로 들 수 있다.

event가 발생하면 브라우저는 event 객체를 만들고 세부 정보를 입력 후 Handler에 인수로 전달한다.

 

Event 를 할당하는 방법

1. HTML 속성 

<input value="Click me" onclick="alert('Click!')" type="button">

• 이름이 지정된 속성을 사용하여 HTML로 설정할 수 있다.
• 마우스로 클릭하면 onclick이 실행되는데 HTML 속성은 많은 코드를 작성하기 때문에 로직을 작성하는 것은 적합하지 않다.
  • JavaScript 함수를 만들고 호출하는 방식을 권장.

<input type="button" onclick="test()" value="Count rabbits!">

<Script>
    function test() {
    	alert("Click");
    }
</Script>

 

2. DOM 속성

• elem.onclick와 같은 DOM 속성을 사용하여 할당한다.
• Handler가 HTML 속성을 사용하여 지정되면 브라우저는 이것을 읽고 속성 내용에서 새 함수를 생성하여 DOM 속성에 사용한다.
• HTML 속성과 동일한 방법이기에 동작 원리도 동일하다.

<input id="elem" type="button" value="Click me">

<script>
  elem.onclick = function() {
    alert('test');
  };
</script>

 

2. this 사용하여 접근하기.

• this를 사용하여 Handler 내부 요소 값에 접근한다.

<button onclick="alert(this.innerHTML)">Click!</button>

 

event 할당 시 주의점

• 기존 함수를 이벤트로 할당할 경우 마지막에 ()를 붙여야한다. (함수 호출과 동일하다.)
• setAttribute를 Handler에 사용하면 동작하지 않는다.
• DOM 속성은 대/소문자가 중요하다.

 

JavaScript의 event 처리 방법

• EventHandler 
  
  • EventHandler 개체의 속성 중 하나를 사용한다.
  • EventHandler는 EventListener와 콜백 함수로 구성되어 있다.
  • EventHandler 한 번 사용할 수 있고, EventHandler를 2번 사용하게 된다면 이전 Handler를 모두 덮어쓴다.

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

button.onclick = () => {
  console.log("Button clicked.");
};

 

• EventListener
  
  • EventHandler 의 단점을 해결하고자 만든 것이 EventListener 이다.
  • Event를 수신하고 발생할 때 트리거가 되는 EventListener 객체를 사용한다.
  • EventListener 가 참조할 수 있는 이벤트 종류의 인덱스는 개요의 2번째 링크를 들어가면 자세히 확인할 수 있다.
  • 하나만 사용할 수 없다.
  • 일부 Event의 경우 Handler는 addEventListener에서만 작동한다. (DOMContentLoaded Event와 동일)
    • DOMContentLoaded는 문서가 로드되고 DOM이 빌드될 때 트리거가 되는 Event이다.
  • EventListener 사용시 Handler에 대한 함수 대신 handlerEvent 를 사용하여 객체 또는 클래스 전달이 가능하다.

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

button.addEventListener("click", () => 
  console.log("Button clicked.");
)

 

차이를 비교한 예시 코드

• EventHandler - 하나의 이벤트

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

button.onclick = () => {
  console.log("First event handler!");
};

button.onclick = () => {
  console.log("Second event handler!");
};

 

출력되는 결과값 (drag)

Second event handler!

 

• EventListener - 다수의 이벤트

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

button.addEventListener("click", () => {
  console.log("First event listener!");
});

button.addEventListener("click", () => {
  console.log("Second event listener!");
});

 

출력되는 결과값 (drag)

First event listener!
Second event listener!

 

EventListener를 제거하고 싶다면?

• removeEventListener()를 사용하라.

element.removeEventListener(event, handler, [options]);

• 핸들러를 제거하려면 할당된 것과 완전히 동일한 함수를 전달해야 한다.
• 함수를 변수에 저장하지 않으면 제거할 수 없는데, EventListene에서 다시 읽어올 방법이 없기 때문이다.

틀린 예시
elem.addEventListener( "click" , () => alert('Thanks!'));
elem.removeEventListener( "click", () => alert('Thanks!'));


올바른 예시
function a() {
  alert( 'Thanks!' );
}

input.addEventListener("click", a);
input.removeEventListener("click", a);

 

결론

• 이벤트를 처리하는 방법은 총 3가지가 존재한다.

1. HTML 속성 - HTML 속성에 이벤트를 처리하면 HTML 태그 중간에 있는 JavaScript 코드가 이질적으로 보일 수 있기에 드물게 사용되고, 많은 코드를 작성할 수 없다.
2. DOM 속성 - DOM 속성을 사용하는 것은 괜찮으나 특정 이벤트 핸들러를 둘 이상 할당할 수 없다.
3. addEventListener를 사용하는 방법 - 해당 객체는 이벤트 핸들러로 지원이 되고, 이런 경우 handlerEvent 메서드가 호출된다.

• Handler를 할당하는 방법에 상관없이 첫 번째 인수로 event 객체를 가져오고, 해당 개체에서 발생할 일에 대한 세부 정보가 포함된다.
• EventListener와 EventHandler는 둘 다 Event를 처리한다는 것이 동일하지만 이벤트를 처리하는 개수의 차이가 존재한다.
• 궁극적으로는 이벤트 처리를 위해 함수를 DOM 요소와 연결하는 방법이 다른 것일 뿐 궁극적인 메커니즘은 본질적으로 동일하다.

 

추가로 보면 좋은 자료

https://kyounghwan01.github.io/blog/JS/JSbasic/eventhandler/#%E1%84%8B%E1%85%B5%E1%84%87%E1%85%A6%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%92%E1%85%A2%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A5-%E1%84%83%E1%85%B3%E1%86%BC%E1%84%85%E1%85%A9%E1%86%A8

https://kyounghwan01.github.io/blog/JS/JSbasic/addEventListener/