DOM을 이용한 이벤트 처리기

📁Web Developing/JavaScript 기초

DOM을 이용한 이벤트 처리기

Hush 2022. 6. 19. 20:43

HTML 요소에 이벤트 처리기를 지정하면 태그 속성과 자바스크립트 소스가 섞인다.

그래서 자바스크립트를 수정하려면 HTML의 태그와 속성을 하나씩 찾아봐야한다.

하지만 DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 보기 좋게 사용할 수 있다.

지금까지 이벤트 처리기를 지정하는 방법은 HTML이 주인이 되어 자바스크립트의 함수를 불러와서 사용했다.

하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결한다.

HTML과 자바스크립트 중에서 어느 쪽을 중심으로 잡는가에 따라 지정하는 방법이 다른다는 것을 알면 된다.

예를 들어 웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용한다.

웹 요소.onclick = 함수;

자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있다.

그중에서 함수 querySelector()를 사용해서 가져오는 것이 쉽다.

querySelector()의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택자를 넣을 수 있다.

다음은 id="change"인 버튼을 클릭했을 때 글자색을 바꾸는 예제이다.

querySelector()를 사용해 버튼 요소를 가져오고 변수 changeBttn에 저장한다.

그리고 changeBttn에 onclick을 사용해 changeColor() 함수를 연결한다.

이때 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다는 것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="change">글자색 바꾸기</button>
    <p>Hi my name is Hush!</p>
        

    </div>
    <script>
        var changeBttn = document.querySelector("#change");
        changeBttn.onclick= changeColor

        function changeColor() {
            document.querySelector("p").style.color="#f00"
        }
    </script>
</body>
</html>

만약 상기 예제처럼 웹 요소를 한번만 호출할 것이라면 변수에 굳이 저장할 필요가 없다.

또한 함수를 한번만 사용할 거라면 이름을 지어줄 필요가 없다.

다음은 이러한 특징을 활용한 다른 방식의 코딩이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="change">글자색 바꾸기</button>
    <p>Hi my name is Hush!</p>
        

    </div>
    <script>
        document.querySelector("#change").onclick= function() {
            document.querySelector("p").style.color="#f00";
        }
    </script>
</body>
</html>

저작자표시 (새창열림)