brunch

You can make anything
by writing

C.S.Lewis

by 내가 사는 세상 Dec 07. 2023

Javascript - 이벤트

웹프로그래밍을 할 때, 개발자는 고객이 브라우저에서 언제 어떻게 행동할지 모른다. 그래서 특정 행동이 발생했을 때 실행시킬 함수를 브라우저에 등록해 둔다. 이때의 함수를 이벤트 핸들러(event handler)라고 부른다.


<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>이벤트 핸들러 예제</title>

</head>

<body>

<button id="myButton">클릭하세요</button>

<script>

    // 버튼 요소를 가져옵니다.

    var button = document.getElementById("myButton");

    // 클릭 이벤트에 직접 함수를 작성하여 등록합니다.

    button.addEventListener("click", function() {

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

    });

</script>

</body>

</html>


여기서 구성요소들을 구체적으로 살펴보면 다음과 같다.

이벤트 타깃 : button

이벤트 타입 : click

이벤트 핸들러 :

function() {

    alert("버튼이 클릭되었습니다.")

}

매거진의 이전글 Javascript-Destructuring(구조분해)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari