JS_문법 (9)_이벤트 Kassid

728x90

웹페이지에 어떠한 이벤트가 발생했을 때

그에 대해 사용자가 상호작용을 할 수 있게 하는 것에 대해서 알아보자.

예전에는 태그에 직접 속성으로 에벤트를 추가하는 방식도 있었지만,

최근에는 JS를 HTML과 분리하기위해서

addEventListener()를 사용하는 방식을 선호한다.

이벤트 등록

대상 요소.addEvenListener(이벤트명, 리스너함수(콜백함수))

이벤트명은

click, intput, focus, mousehover 등을 이야기한다.

리스너함수는 말그대로 '함수'를 넣어주면 된다.

따라서 인수 자리에 함수를 정의해주거나 정의한 함수의 이름을 넣어준다.

(함수의 이름이 아닌 "함수명()"의 형태를 넣어주면 반환값이 들어가므로 정상작동X)

이벤트 삭제

대상 요소.removeEvenListener(이벤트명, 이벤트 발생시 실행 함수)

등록할 때 적용한 인수를 그대로 써주어야 한다.

예시 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            line-height: 100px;
            background: blueviolet;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">Hello!</div>
    <script>
        const box1 = document.querySelector(".box1")	//선택자를 이용해 변수에 담기
        box1.addEventListener("click", () => {	//해당 블록을 클릭했을 때
          alert("Hello!");	//알림창 띄우기
        });
    </script>
</body>
</html>

예시 2

addEventListener 활용

노란색 버튼은 생성, 주황색 버튼은 삭제를 하는 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
        }
        .button1 {
            width: 50px;
            height: 20px;
            background: gold;
        }
        .button2 {
            width: 50px;
            height: 20px;
            background: orangered;
        }
        .box1 {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            line-height: 100px;
            background: blueviolet;
            text-align: center;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="button1"></div>
        <div class="button2"></div>
    </div>
    <script>
        const button1 = document.querySelector(".button1")
        const button2 = document.querySelector(".button2")
        let newBox = document.createElement("div")
        button1.addEventListener("click", () => {
            newBox.setAttribute("class", "box1")
            document.body.appendChild(newBox)
        });
        button2.addEventListener("click", () => {
            document.body.removeChild(newBox)
        });
    </script>
</body>
</html>

예시 3

removeEventListener 활용

보라색 블록을 눌렀을 때

삭제버튼의 이벤트를 삭제하는 코드이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:hover {
            cursor: pointer;
        }
        .container {
            display: flex;
            flex-direction: row;
        }
        .button1 {
            width: 50px;
            height: 20px;
            background: gold;
        }
        .button2 {
            width: 50px;
            height: 20px;
            background: orangered;
        }
        .box1 {
            width: 100px;
            height: 100px;
            border-radius: 5px;
            line-height: 100px;
            background: blueviolet;
            text-align: center;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="button1"></div>
        <div class="button2"></div>
    </div>
    <script>
        const createBox = () => {
            newBox.setAttribute("class", "box1")
            document.body.appendChild(newBox)
        }
        const removeBox = () => {
            document.body.removeChild(newBox)
        }

        const button1 = document.querySelector(".button1")
        const button2 = document.querySelector(".button2")
        let newBox = document.createElement("div")
        button1.addEventListener("click", createBox);
        button2.addEventListener("click", removeBox);

        newBox.addEventListener("click", () =>{
            newBox.innerText = "Fixed!"
            button2.removeEventListener("click", removeBox);
        })
        
    </script>
</body>
</html>

예시4

사용자로부터의 입력값 활용

<input type="text" name="" id="word-input">
<button>입력</button>
<script>
    document.querySelector('input').addEventListener('input', (event) => {
        console.log(event.target.value);
    });
    document.querySelector('button').addEventListener('click', () => {
        console.log("버튼 클릭!");
    });
</script>

event를 리스너함수에 인수로 삽입하고

event.target.value를 이용하여 입력값을 가져올 수 있다.

input 이벤트는 입력창에 변화가 있을 때마다 일어나므로

버튼 클릭 이벤트가 일어난 시점의 직전 상태를 이용하면

유저가 의도한 값을 활용할 수 있다.

※.vlaue / .textContent

요소의 종류에 따라서 내부의 값을 가져올 때 .value 와 .textContent로 다른 경우가 있다.

이를 일반화시키면 '입력을 하는 경우'에는 value이다.

( .value : input, select, textarea 등)

( .textContent : button, div, span 등)

저작자표시

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

JS_기본 문법 (11)_템플릿 문자열 (0)	2022.11.23
JS_문법 (10)_대화창 (0)	2022.07.26
JS_문법 (8)_DOM CRUD 파헤치기 (0)	2022.02.24
JS_문법 (7)_DOM / BOM (0)	2022.02.23
JS_문법 (6)_promise 메서드(catch, finally, all, race 등 ) (0)	2022.02.20

JS_문법 (9)_이벤트

이벤트 등록

이벤트 삭제

예시 1

예시 2

예시 3

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

댓글

티스토리툴바

JS_문법 (9)_이벤트

이벤트 등록

이벤트 삭제

예시 1

예시 2

예시 3

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바