[면접예상] 20230719

neul·2023년 7월 19일

면접예상

목록 보기

30/36

🐝자바 스크립트 이벤트 및 이벤트 처리 방법에 대하여 설명하시오

이벤트 (Event)

이벤트는 웹 페이지에서 발생하는 동작이나 사건을 의미
버튼 클릭, 키보드 입력, 마우스 움직임 등이 이벤트에 해당함
사용자와 웹 페이지가 상호작용하는 것을 가능하게 함

이벤트 처리 방법

HTML

HTML 요소에 직접 이벤트 속성을 추가하여 이벤트를 처리하는 방법
<button>와 같이 사용

DOM 리스너

자바스크립트로 DOM 요소에 이벤트 리스너를 추가하는 방법
addEventListener() 메서드를 사용하여 이벤트를 감지하고 처리

인라인 핸들러

HTML 요소의 속성 값에 직접 함수를 선언하여 이벤트를 처리하는 방법
<button>와 같이 사용

🐝프로그래밍 하시오

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="increment()">+1</button>
    <button onclick="decrement()">-1</button>
    <div id="counterValue">0</div>



    <script>
        let value = 0;

        function increment() {
            value += 1;
            counterValue();
        }

        function decrement() {
            value -= 1;
            counterValue();
        }

        function counterValue() {
            const counterValueElement = document.getElementById('counterValue');
            counterValueElement.textContent = value;
        }
    </script>
</body>
</html>