컴퓨터는 잘못이 없다..

[JavaScript]addEventListener의 keydown이벤트 본문

공부/JavaScript

[JavaScript]addEventListener의 keydown이벤트

도토리까꿍v 2020. 11. 9. 09:20
Contents 접기

[예제코드]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_EventListener3.html</title>
</head>
<body>

    <h1>key event 처리</h1>
    <input type="text" id="inputMsg" placeholder="메세지 입력..."/>
    <p id="result"></p>
    <ul id="msgList"></ul>

    <script>

        //event : keydown(키보드가 눌렸을 때 정보를 알려준다.)
        document.querySelector("#inputMsg")
            .addEventListener("keydown",function(event){
                //여기서 event는 keydown이라는 event에 대한 object 정보를 알려준다.
                console.log(event);
                //1. 만일 enter키를 눌렀다면
                if(event.key == "Enter"){//event.key 나 event.keyCode 둘 중 하나로 비교해도 된다. 

                    //2.input요소에 입력한 value를 읽어와서 
                    let msg = document.querySelector("#inputMsg").value;
                    
                    //3. p요소의 innerText로 출력하기 
                    document.querySelector("#result").innerText = msg;

                    //4. ul의 li요소에 추가하기 
                    let li = document.createElement("li"); //li를 생성해라
                    li.innerText = msg; //msg를 innerText에 넣어라
                    document.querySelector("#msgList").append(li);//ul의 자식요소로 넣어라 
                    
                    //5. 텍스트창 비워주기(해주고 안해주고 차이 알아두기!!) 
                    document.querySelector("#inputMsg").value = "";

                }
            });

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

 

[실행 결과]

저작자표시

'공부 > JavaScript' 카테고리의 다른 글

[JavaScript]addEventListener 퀴즈  (0) 2020.11.09
[JavaScript]addEventListener의 callback함수 매개변수, mousemove 이벤트  (0) 2020.11.09
[JavaScript]EventListener 사용해보기, callback함수 내 this 의미  (0) 2020.11.06
'공부/JavaScript' Related Articles more
Comments