컴퓨터는 잘못이 없다..

[JavaScript]addEventListener의 callback함수 매개변수, mousemove 이벤트 본문

공부/JavaScript

[JavaScript]addEventListener의 callback함수 매개변수, mousemove 이벤트

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

[addEventListener의 callback함수 매개변수]

 

-eventListener 의 callback 함수의 매개변수로 event에 대한 정보가 object 형태로 들어간다.

-mousemove이벤트에 대한 객체정보가 evnet에 {isTrusted: true, screenX: 282, screenY: 512, clientX: 282, clientY: 409, …} 이런 형태로 들어간다.

-또한 모든 event는 object정보를 가지고 있다.

 

 

[예제코드]

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

    <style>
        .wrapper{
            width : 500px;
            height : 500px;
            border: 1px solid red;
            cursor: crosshair; /*커서 모양이 + 로 바뀜*/
        }
    </style>
</head>
<body>

        <h1>EventListener 테스트중...</h1>
        <div class="wrapper" id="myDiv"></div>

        <script>
       
            document.querySelector("#myDiv").addEventListener("mousemove",function(event){
                console.log("mousemove!");
                //event는 발생한 이벤트에 대한 정보를 담고있는 objec이다. 
                //여기선 mousemove라는 이벤트에 대한 정보를 볼 수 있음!
                console.log(event);
                //필요한 정보를 event object에서 얻어내서
                let info = `x좌표 : ${event.offsetX} y좌표: ${event.offsetY}`;
                //이벤트가 발생한 div의 innerText로 출력하기
                this.innerText=info;
                event
            });
        </script>
    
</body>
</html>

 

[코드 결과]

저작자표시

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

[JavaScript]addEventListener의 keydown이벤트  (0) 2020.11.09
[JavaScript]EventListener 사용해보기, callback함수 내 this 의미  (0) 2020.11.06
[JavaScript]즉시 실행 함수란?  (0) 2020.11.06
'공부/JavaScript' Related Articles more
Comments