JavaScript/실습

실습 - 이미지 클릭하면은, 이벤트 유형 & 위치 나타내기

yunajoe 2023. 1. 29. 13:09

 

 

나의풀이 

 

<!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>
</head>
<body>
    <div id="container">
        <img src="./images/cup-1.png" id="cup-1">
    </div>
    <script>
        let pic = document.querySelector('#cup-1')
        pic.onclick = function descript(event){
            let event_type = event.type; 
            alert("이벤트 유형 :" + event_type, "이벤트 발생 위치" + event.pageX + ","  + event.pageY)             
        }  
    </script>
</body>
</html>

**** event.pageX 와 event.pageY 동작이 안됨

--> 왜냐하면은  event_type 과  "이벤트 발생 위치" 가 플러스(+) 가 아닌, 쉼표(,)로 연결되어 있기 때문이다

 

해설풀이 

<!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{
        width:300px;
        margin: 10px auto;
    }

    </style>
</head>
<body>  
    <div id="container">
        <img src="./images/cup-1.png" id="cup">
    </div>

    <script>
        let cup = document.querySelector('#cup'); 
        cup.onclick = function(event){
            alert('이벤트유형 ' + event.type  + ', 이벤트 발생 위치:  ' + event.pageX + " , " + event.pageY);
        }  
    </script>       
</body>
</html>