[JavaScript] 10. 자바스크립트의 이벤트 처리

2024년 07월 24일

Song hyun
작성자
2024.07.24.:39

728x90

[JavaScript] 자바스크립트의 이벤트 처리

1. HTML 요소에 이벤트 등록하기

(1) 자바스크립트 이벤트란?

(2) 이벤트 등록의 대표적인 3가지 방식

Inline Event Handler
Element Property
addEventListener

*단, 비동기 통신으로 페이징 처리할 경우 Inline Event Handler 권장!

2. 코드 예제

(1) 코드 예제 - 숨기기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex--container{
            display:flex;
        }
        .box{
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>숨기기</h1>
    <div class="flex--container">
        <!--Inline Event Handler 방식 사용-->
        <button onclick="hideDisplay()">display로 숨기기</button>
        <button onclick="hideVisible()">visible로 숨기기</button>

        <div class="box">
            <div class="box" id="innerBox1">내부 박스 1</div>
            <div class="box" id="innerBox2">내부 박스 2</div>
        </div>

    </div>

    <script>
        function hideDisplay(){
            let el=window.document.querySelector("#innerBox1");
            el.style.display='none'; // 
        }

        function hideVisible(){
            let el=document.querySelector("#innerBox2");
            el.style.visibility="hidden";
        }

        // display 와 visibility 는 무엇이 다를까?
        // display: display=none은 아예 렌더링에서 사라짐 (보임/위치 모두 사라짐)
        // visibility: 보이지만 않게 처리! (보이지만 않게 됨)

    </script>
</body>
</html>

(1) 공간 차리

-display: none

-visibility: hidden: 요소는 화면에서 보이지 않지만, 요소가 차지하던 공간은 유지된다. 즉, 요소가 보이지 않게

(2) 이벤트 발생

-display: none: 요소가 완전히 비활성화되어, 이벤트를 발생시킬 수 없다.

-visibility: hidden: : 이벤트는 발생하지 않지만, 만약 자식 요소가 visibility:visible로 설정되어 있다면 자식 요소에서는 이벤트가 발생할 수 있다.

(2) 코드 예제 - 보이기

기본 속성을 hidden/noe으로 설정한 뒤, 버튼을 클릭 시 보이게 만들기!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex--container{
            display:flex;
        }
        .box{
            border: 1px solid black;
            padding: 10px;
        }
        #innerBox1{
            display: none;
        }
        #innerBox2{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <h1>보이기</h1>
    <div class="flex--container">
        <!--Inline Event Handler 방식 사용-->
        <button onclick="showDisplay()">display로 보이기</button>
        <button onclick="showVisible()">visible로 보이기</button>

        <div class="box">
            <div class="box" id="innerBox1">내부 박스 1</div>
            <div class="box" id="innerBox2">내부 박스 2</div>
        </div>

    </div>

    <script>
        function showDisplay(){
            let el=window.document.querySelector("#innerBox1");
            // inline, block, flex...
            el.style.display='block'; // 
        }

        function showVisible(){
            let el=document.querySelector("#innerBox2");
            el.style.visibility="visible";
        }

        // display 와 visibility 는 무엇이 다를까?
        // display: display=none은 아예 렌더링에서 사라짐 (보임/위치 모두 사라짐)
        // visibility: 보이지만 않게 처리! (보이지만 않게 됨)

    </script>
</body>
</html>

(3) 코드 예제 - 노드 생성하기

*textContent와 innerHTML의 차이점:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            padding: 0px;
        }
        li{
          background-color: #f9f9f9;
          margin: 8px 0;
          padding: 10px;
          border: 1px solid #ccc;  
        }
    </style>
</head>
<body>
    <h1>요소를 동적으로 추가하기</h1>
    <button onclick="addItem()">아이템 추가</button>
    <br>
    <ul id="myList">
        <li>아이템1</li>
    </ul>
    <script>
        let count=1;
        function addItem(){
            count++;
            let newItem=document.createElement("li");
            newItem.innerHTML=`새로운 아이템${count}`;
            let ulList=document.querySelector("#myList");
            ulList.append(newItem);

            //textContent와 innerHTML의 차이점이 뭘까?
        }
    </script>
</body>
</html>

(4) 코드 예제 - 노드 삭제하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            padding: 0px;
        }
        li{
          background-color: #f9f9f9;
          margin: 8px 0;
          padding: 10px;
          border: 1px solid #ccc;  
        }
    </style>
</head>
<body>
    <h1>요소를 동적으로 삭제하기</h1>
    <button onclick="removeItem()">아이템 삭제</button>
    <br>
    <ul id="myList">
        <li>아이템1</li>
        <li>아이템2</li>
        <li>아이템3</li>
        <li>아이템4</li>
    </ul>
    <script>
        function removeItem(){
            // 1. 요소 들고 오기(요소=노드)
            let list = document.querySelector("#myList");
            
            // 2. 마지막 자식이 있을 경우, 삭제합니다.(ul의 하위 요소->li)
            let lastChild = list.lastElementChild;

            // 3. 삭제 처리 --> 해당 요소에 removeChild 메서드 사용
            // (매개변수는 해당 노드를 넣어주자.)
            if(lastChild){
                //lastChild 요소가 있으면 true, 없으면 false 반환
                list.removeChild(lastChild);
            } else{
                alert("더이상 자식이 존재하지 않습니다.");
            }

        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            padding: 0px;
        }
        li{
          background-color: #f9f9f9;
          margin: 8px 0;
          padding: 10px;
          border: 1px solid #ccc;  
        }
    </style>
</head>
<body>
    <h1>요소를 동적으로 삭제하기2</h1>
    <button>아이템 삭제</button>
    <br>
    <ul id="myList">
        <li>아이템1</li>
        <li>아이템2</li>
        <li>아이템3</li>
        <li>아이템4</li>
    </ul>
    <script>

        let btn=document.getElementsByTagName("button");
        console.log(btn);
        btn[0].onclick=function(){
            // 1. 요소 들고 오기(요소=노드)
            let list = document.querySelector("#myList");
            
            // 2. 마지막 자식이 있을 경우, 삭제합니다.(ul의 하위 요소->li)
            let lastChild = list.lastElementChild;

            // 3. 삭제 처리 --> 해당 요소에 removeChild 메서드 사용
            // (매개변수는 해당 노드를 넣어주자.)
            if(lastChild){
                //lastChild 요소가 있으면 true, 없으면 false 반환
                list.removeChild(lastChild);
            } else{
                alert("더이상 자식이 존재하지 않습니다.");
            }
        }
    </script>
</body>
</html>

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 12. 이벤트 위임과 버블링 (0)	2024.07.26
[JavaScript] 11. EventListener (0)	2024.07.26
[JavaScript] 9-1. 예제 (0)	2024.07.22
[JavaScript] 9. DOM(Document Object Model) (0)	2024.07.22
[JavaScript] 8. 함수의 개념과 활용 (0)	2024.07.19

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 자바스크립트의 이벤트 처리

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바