개발

자주 사용하는 addEventListener 목록 및 사용 예제 본문

Frontend/JavaScript

자주 사용하는 addEventListener 목록 및 사용 예제

Study 2021. 3. 10. 23:25

 

이벤트 명 설명 
change 변동이 있을 때 발생 
click 클릭 시 발생
focus 포커스를 얻었을 때 발생
keydown 키를 눌렀을 때 발생 
keyup 키에서 손을 땟을 때 발생 
load 로드가 완료 되었을 때 발생 
mousedown 마우스를 클릭 했을 때 발생
mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생
mouseover 마우스가 특정 객체 위로 올려졌을 때 발생
mousemove 마우스가 움직였을 때 발생
mouseup 마우스에서 손을 땟을 때 발생
select option 태그 등에서 선택을 햇을 때 발생

 

 

 

click 사용예제

 

addEventListener의 클릭 이벤트와 

event.clientX, event.clientY를 응용한 클릭하여 이동시키는 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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>
body{
    margin: 0px;
}
#wrapper{
    width: 100%;
    height: 600px;
    background-color: yellowgreen;
    position: relative;
}
</style>
<script>
var img;
var flag=false;
function getPos(){
    console.log(flag);
    var x=event.clientX;
    var y=event.clientY;
    document.getElementById("x-pos").value=x;
    document.getElementById("y-pos").value=y;
    if(!flag){
        img.style.border="2px solid red"
    }else{
        img.style.border="0px solid red"
    }
    if(flag){
        img.style.left=(x-50)+"px";
        img.style.top=(y-50)+"px";
    }
}
function init(){
    img= document.createElement("img");
    img.src="../images/ball.webp";
    img.style.position="absolute";
    img.style.left=100+"px";
    img.style.top=150+"px";
    img.style.width=100+"px";
    var wrapper = document.getElementById("wrapper");
    wrapper.appendChild(img);
    img.addEventListener("click", function(){
        flag=!flag;
    })
 
}
console.log(flag);
//
</script>
</head>
<body onMouseMove="getPos()" onLoad="init()">
    <div id="wrapper">
        X값: 
        <input type="text" value=0 id="x-pos">
        y값: 
        <input type="text" value=0 id="y-pos">
        <button onclick="oClick()">버튼</button>
    </div>
</body>
</html>
 cs

 

 

 

 

load 사용 예제

addEventListener의 로드 이벤트와 

프롬프트, if~else문을 응용한 입력받은 값으로 배경색 정하는 예제입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>
    <script>
        window.addEventListener("load", function(){
            init();
        })
        function init(){
            var result=prompt("원하시는 배경 색을 선택하세요 \n 무지개순서 1,2,3,4,5,6,7")
            var color;
            if(result==1){
                color="red";
            }else if(result==2){
                color="orange";
            }else if(result==3){
                color="yellow";
            }else if(result==4){
                color="green";
            }else if(result==5){
                color="blue";
            }else if(result==6){
                color="navy";
            }else if(result==7){
                color="purple";
            }else{
                alert("똑바로 정하세요 닝겐")
                setTimeout("init()", 1000);
            }
            document.body.style.backgroundColor=color;
        }
    </script>
</head>
<body>
    
</body>
</html>
 cs

'Frontend > JavaScript' 카테고리의 다른 글

제어문, 예제  (0) 2021.03.20
아스키코드표, 아스키코드 출력예제  (0) 2021.03.10
삼항연산자, input 응용 예제!  (0) 2021.03.05
Element 동적 생성, input박스 입출력  (0) 2021.03.05
삼항연산자 응용 (스위치 on, off)  (0) 2021.03.05
'Frontend/JavaScript' Related Articles more