이벤트(Event)와 이벤트 처리기(Event Handler)

이벤트(Event)와 이벤트 처리기(Event Handler) 개념 정리

1. 이벤트(Event)

이벤트는 브라우저나 사용자가 수행하는 행동을 말합니다. 예를 들어, 마우스 클릭, 키보드 입력, 페이지가 로드되는 것 등이 모두 이벤트에 해당합니다. 웹 페이지에서 특정 동작이 발생할 때 이벤트를 발생시키고, 그 이벤트에 반응하여 특정 작업을 실행하게 할 수 있습니다.

대표적인 이벤트:

• click: 사용자가 요소를 클릭했을 때 발생
• mouseover: 마우스를 요소 위에 올렸을 때 발생
• keydown: 키보드를 눌렀을 때 발생
• load: 페이지나 리소스가 모두 로드되었을 때 발생

2. 이벤트 처리기(Event Handler)

이벤트 처리기는 이벤트가 발생할 때 실행되는 함수입니다. 이벤트가 발생하면 해당 이벤트 처리기가 호출되어, 지정된 작업을 수행합니다. 이벤트 처리기는 주로 특정 HTML 요소에 바인딩되어, 그 요소에서 특정 이벤트가 발생할 때 호출됩니다.

---

이벤트 처리 방법

1. HTML 속성에서 직접 이벤트 처리기 작성

HTML 요소의 속성으로 직접 이벤트 처리기를 지정할 수 있습니다.

<button onclick="alert('버튼이 클릭되었습니다!')">Click Me</button>

• onclick 속성은 클릭 이벤트가 발생했을 때 실행할 코드를 지정합니다.

2. 자바스크립트에서 이벤트 처리기 추가

• addEventListener(): 자바스크립트에서 이벤트를 처리하는 더 좋은 방법은 addEventListener() 메서드를 사용하는 것입니다. 이를 통해 다양한 이벤트를 처리할 수 있으며, 이벤트 핸들러를 동적으로 추가하거나 제거할 수 있습니다.

const button = document.querySelector("button");
button.addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

3. 이벤트 처리기 함수 분리

이벤트 처리기를 함수로 분리하여 깔끔하게 코드를 작성할 수 있습니다.

function handleClick() {
    alert("버튼이 클릭되었습니다!");
}

const button = document.querySelector("button");
button.addEventListener("click", handleClick);

4. 이벤트 객체(Event Object)

이벤트가 발생하면 브라우저는 이벤트와 관련된 정보를 담은 이벤트 객체를 자동으로 생성합니다. 이 객체를 통해 추가 정보를 얻을 수 있습니다. 예를 들어, 이벤트가 발생한 위치나 타겟 요소 등 다양한 정보를 얻을 수 있습니다.

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

button.addEventListener("click", function(event) {
    console.log(event.target); // 이벤트가 발생한 요소
    console.log(event.type);   // 이벤트의 타입 (예: 'click')
});

---

주요 이벤트와 이벤트 처리 예시

1. click 이벤트

사용자가 버튼을 클릭했을 때 이벤트를 처리하는 예시입니다.

<button id="myButton">Click Me</button>

<script>
    const button = document.getElementById("myButton");

    button.addEventListener("click", function() {
        alert("Button clicked!");
    });
</script>

2. mouseover 이벤트

마우스를 요소 위에 올리면 이벤트가 발생합니다.

<div id="hoverDiv" style="width:200px; height:100px; background-color:lightblue;">Hover over me</div>

<script>
    const hoverDiv = document.getElementById("hoverDiv");

    hoverDiv.addEventListener("mouseover", function() {
        hoverDiv.style.backgroundColor = "yellow";
    });

    hoverDiv.addEventListener("mouseout", function() {
        hoverDiv.style.backgroundColor = "lightblue";
    });
</script>

3. keydown 이벤트

사용자가 키보드를 눌렀을 때 발생하는 이벤트입니다.

<input type="text" id="inputField" placeholder="Type something..." />

<script>
    const inputField = document.getElementById("inputField");

    inputField.addEventListener("keydown", function(event) {
        console.log("You pressed: " + event.key);
    });
</script>

4. load 이벤트

웹 페이지의 모든 리소스가 로드된 후에 실행됩니다.

<script>
    window.addEventListener("load", function() {
        console.log("Page fully loaded!");
    });
</script>

---

추가 개념

1. 이벤트 위임(Event Delegation)

많은 요소에 동일한 이벤트 처리기를 추가하는 대신, 부모 요소에 이벤트 처리기를 한 번만 등록하고 하위 요소의 이벤트를 처리하는 기법을 이벤트 위임이라고 합니다. 이 방법을 사용하면 성능을 최적화할 수 있습니다.

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    const list = document.getElementById("myList");

    list.addEventListener("click", function(event) {
        if (event.target.tagName === "LI") {
            alert("You clicked on " + event.target.textContent);
        }
    });
</script>

2. 이벤트 버블링(Event Bubbling)과 캡처링(Event Capturing)

이벤트는 특정 요소에서 발생하면, 그 이벤트는 부모 요소로 전파됩니다. 이 과정을 이벤트 버블링이라고 하며, 기본 동작입니다. 반대로, 이벤트가 부모 요소에서 자식 요소로 전파되는 것을 이벤트 캡처링이라고 합니다.

이 두 방식을 제어하려면 addEventListener()의 세 번째 인자로 true(캡처링) 또는 false(버블링)를 설정할 수 있습니다.

element.addEventListener("click", handler, true);  // 캡처링
element.addEventListener("click", handler, false); // 버블링 (기본값)

---

정리

• 이벤트는 웹 페이지에서 발생하는 행동이고, 이벤트 처리기는 그 행동에 반응하여 실행되는 함수입니다.
• 이벤트 처리기를 등록하는 방법은 여러 가지가 있지만, addEventListener()가 가장 많이 사용됩니다.
• 이벤트 객체를 통해 이벤트와 관련된 다양한 정보를 얻을 수 있습니다.
• 이벤트 위임과 버블링/캡처링을 이해하면, 복잡한 이벤트 처리를 더욱 효율적으로 작성할 수 있습니다.