JavaScript EventListener

EventListener 란?

동적인 웹 애플리케이션을 구동하기위해 사용되며

DOM에서 특정 이벤트가 발생되면 해당 이벤트 처리 함수를 추가할 수 있는 object 이다.

이벤트 리스너를 이용하여 특정 DOM에 javascript 이벤트가 발생할 때 특정 함수를 호출한다.

 

 

EventListener 사용방법

DOM객체.addEventListener(이벤트명, 함수명)

    <button id="sendBtn">전송2</button>

    <script>

        // id 가 sendBtn 인 요소에 "click" 이벤트가 일어나면 호출될 callback 함수

        document.querySelector("#sendBtn").addEventListener("click", ()=>{

            alert("전송합니다");

        });

 

sendBtn 의 id를 가진 객체가 클릭될때마다 alert 메세지로 "전송합니다" 를 출력함.

전송2 버튼 클릭

 

예제 1)

마우스 이동 이벤트

    <h1>마우스 이벤트 처리 하기</h1>

    <div class="box"></div>

    <script>

        document.querySelector(".box").addEventListener("mousemove", (event)=>{

            // console.log("movemove!");

            console.log(event);

            // 이벤트가 일어난 곳의 상대 좌표 얻어내기

            let x=event.offsetX;

            let y=event.offsetY;

            // 이벤트가 일어난 요소(div) 의 innerText 로 출력해 보기

            event.target.innerText = "X :"+ x +"Y :" + y;

        });

    </script>

 

해당 div 안에 마우스가 움직일때마다 x,y 좌표값을 이벤트가 일어난 요소안의 innerText으로 출력

div 박스 안에서 마우스 이동 이벤트 발생 상태

 

예제 2)

key 이벤트

    <h1>key event 활용해 보기</h1>

    <input type="text" id="inputmsg" placeholder="입력...">

    <p id="result"></p>

    <input type="text" id="result2">

    <script>

        document.querySelector("#inputmsg").addEventListener("keyup", (event)=>{

            // evnet 에는 발생한 key event 에 대한 정보가 들어 있다

            console.log(event);

            // 입력한 문자열을 읽어와서

            let msg = event.target.value;

            // p요소의 innerText 로 출력하기

            document.querySelector("#result").innerText = msg;

            if (event.key == "Enter") {

                event.target.value="";

                document.querySelector("#result").innerText = null

                document.querySelector("#result2").value = msg;

            }

        });

    </script>

 

input 안에 키보드로 값을 입력하면 하단 p열에 똑같은 텍스트가 출력되도록 하고 

if 문을 활용하여 엔터 값이 입력되었을 경우 input 하단의 값에 동일한 값이 입력되도록 동작

p열에 동일한 값 출력

Enter 값 입력 하여 하단의 input에 동일한 값 입력되어짐