Event Handling in Javascript

3 different ways to handle events.

• HTML event handlers.
• DOM level event handlers
• Event Listeners
  
  

1. HTML Event Handlers ( Inline Event )

• Assign an event handler as an attribute in the HTML tag.

<button onclick = "handleClick()">Click Here</button>

<script>
const handleClick = () => console.warn('* Button Clicked *')
</script>

가독성: 동일한 요소에 여러 이벤트 핸들러가 있을 때, 이벤트 핸들러 코드가 HTML 코드와 섞여 있어 읽기 어렵다.

타이밍 문제: 요소가 완전히 로드되기 전에 자바스크립트 코드가 실행되면, 사용자가 요소와 상호작용할 때 오류가 발생할 수 있다.

2. DOM level event handlers

• 요소에 ID나 클래스를 부여.

<button class = "clickBtn">Click Here</button>

<script>
const clickBtn = document.querySelector(".clickBtn")

const handleClick = () => console.warn('* Button Clicked *')

clickBtn.onclick = handleClick
</script>

이전 방법과 비교했을 때, 이 방법에서는 함수의 범위를 쉽게 제어할 수 있다.

공통점은 두 방법 모두 이벤트 타입당 하나의 이벤트 핸들러만 가질 수 있다는 것이다.

3. Event Listeners

• 객체에 이벤트 리스너를 추가하여 이벤트를 사용.

  addEventListener() – to register an event handler.
  
  removeEventListener() – to remove an event handler.

<button class = "clickBtn">Click Here</button>

<script> 
const clickBtn = document.querySelector(".clickBtn")

const handleClick = () => console.warn('* Button Clicked *')

clickBtn.addEventListener('click', handleClick, false)
</script>

이렇게 하면 사용자가 발생시키는 다양한 이벤트를 처리할 수 있다.

이 방법에서는 이벤트 타입당 여러 개의 이벤트 핸들러를 가질 수 있다.

Reference

https://medium.com/vectoscalar/understanding-different-ways-of-event-handling-in-javascript-8712d7f7ff36