Posted Updated  minkuen frontEnd / javascript8 minutes read (About 1209 words)

JavaScript Event

이벤트 객체

  • Keyboard 및 Mouse 등의 입력장치에서는 이벤트가 발생함
  • 발생한 Event의 속성값들을 대상으로 문서의 변경을 활용할 수 있음

Untitled

이벤트 관리

  • 이벤트는 Window라는 객체가 모든 객체를 대상으로 관리하고 있음.
  • 최하단의 객체의 이벤트는, 상위로 이벤트를 발생시키고 있음. (상위 객체에서 관리 가능함)

Untitled

이벤트 객체의 메서드(1)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있다

Untitled

이벤트 객체의 메서드(2)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있음
  • Mouse는 X,Y의 좌표를 확인할 수 있도록 인터페이스 제공함

Untitled

이벤트 객체의 메서드(3)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있음
  • Keyboard는 눌려진 Key 및 ALT/SHIFT 등을 확인할 수 있도록 인터페이스 제공함

Untitled

마우스 이벤트 실습

  • 마우스 이벤트는 e.target이란 객체로 속성값들을 사용할 수 있음

Untitled

  • event_01.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <section id = "section">
        <!-- 세번째 방법으로 bubbling 효과를 확인 -->
        <div id ="img-list">
            <img class="img" src="images/img1.jpg">
            <img class="img" src="images/img2.jpg">
            <img class="img" src="images/img3.jpg">
            <input type="text">
        </div>
        <div>
            <img class="current-img" src="images/img1.jpg">
        </div>
    </section>
</body>
  • event_01.js
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
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let imgList = section.querySelector("#img-list");
    let imgs = section.querySelectorAll(".img");
    let currentImg = section.querySelector(".current-img");

    /*  첫번째 방법 : 이미지들 중 클릭된 것만 대상으로 src 변경하여 이미지 변경
    imgs[0].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    imgs[1].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    imgs[2].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    */

    /*  두번째 방법 : 첫번째 방법을 for문을 활용하여 코드 간결화
    for (let i=0 ; imgs.length ; i++) {
        imgs[i].onclick = function(e) {
            currentImg.src = e.target.src;
        }
    }
    */

    // 세번째 방법 : 상위 객체에서도 이벤트를 bubbling을 통해서 받기 때문에.
    //              상위 객체에서도 관리가 가능합니다. 
    //              다만, img가 아닌 것은 제외하면서 이미지의 경로를 변경 작업함.
    imgList.onclick = function(e) {
        console.log(e.target.className);
        if (e.target.className != 'img') {
            return; 
        }
        currentImg.src = e.target.src;
    }

});
  • 결과
  • 클릭한 이미지가 아랫 열에 출력되도록 구현되었다

Untitled

마우스 이벤트 실습 - trigger

  • 특정 Element 이벤트는 다른 Element 이벤트를 호출할 수 있음 (트리거)
  • Span tag의 클릭이 file 선택하는 input Tag를 클릭하게 함.

Untitled

  • trigger_01.html
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
<!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>event</title>
    <style>
        .file-button{
            /* 버튼은 숨김. */
            display:none;
        }
        .file-trigger-button {
            background-color: green;
            border : 1px solid lightgreen;
            border-radius: 5px;
            /* 상하는 5px, 좌우는 10px */
            padding : 5px 10px;
            color : white;
            /* 버튼 위로 마우스가 올라가면 클릭을 유도하는 포인터 */
            cursor : pointer;
        }
        .file-trigger-button:hover {
            background-color: lightgreen;
        }
    </style>
    <script src="trigger_01.js"></script>
</head>
<body>
    <section id="section">
        <input type="file" class="file-button">
        <span class="file-trigger-button">파일선택</span>
    </section>
</body>
</html>
  • trigger_01.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let fileButton = section.querySelector(".file-button");
    let fileTriggerButton = section.querySelector(".file-trigger-button");

    // fileButton.onclick에 대해서는 미정의
    fileButton.onclick = function(e) {
    };
    fileTriggerButton.onclick = function(e) {
        let event = new MouseEvent("click", {
            'view':window,
            'bubbles' : true,
            'cancelable' : true
        })
        // 숨겨진 fileButton은 event(위에서 정의한 마우스이벤트)를 수행한다.
        fileButton.dispatchEvent(event);
    }
});
  • 결과
  • 파일 선택 후 의도한 결과가 출력되었다

Untitled

마우스 이벤트 실습 - X,Y 좌표 이용

  • 마우스 이벤트 발생시 X,Y 좌표를 활용할 수 있음
  • X,Y 좌표는 여러가지의 형태로 존재함.

Untitled

  • 사각형을 만든다
  • 클릭한 곳으로 사각형이 이동하도록 작성해보자
  • event_02.html
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
<!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>event 실습</title>
    <style>
				body{
            margin : 0px 0px;
        }
        .container{
            width: 800px;
            height: 400px;
            border: 1px solid gray;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background: blue;
        }
    </style>
    <script src="event_02.js"></script>
</head>
<body>
    <section id = "section">
        <div class = "container">
            <div class="box"></div>
        </div>
    </section>
</body>
</html>
  • event_02.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let container = section.querySelector(".container");
    let box = section.querySelector(".box");

    container.onclick = function(e){
        console.log("(x,y) = " + e.x, e.y);
        console.log("(client) = " + e.clientX, e.clientY);
        console.log("(page) = " + e.pageX, e.pageY);
        console.log("(offset) = " + e.offsetX, e.offsetY);

        box.style.position = "absolute";
        box.style.left = e.x + "px";
        box.style.top = e.y + "px";
    }
});
  • 결과
  • 클릭한 위치로 사각형이 이동한다

Untitled

  • 이번에는 사각형을 드래그하여 움직히에 한다
  • event_02.js에 다음 코드를 추가한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let offset = {x:0, y:0};

// on mounse down = 마우스가 눌린 상태
container.onmousedown = function(e){
    // 석택된 객체가 box라면, dragging을 true로 처리
    if(e.target == box){
        dragging = true;
    }
};

// 마우스가 떨어진 상태
container.onmouseup = function(e){
    // 선택된 객체가 box라면 dragging을 false로 처리
    if(e.target == box){
        dragging = false;
    }
};

box.onmousedown = function(e){
    offset.x = e.offsetX;
    offset.y = e.offsetY;
}
  • 캡처로만 봤을 때는 차이가 없지만 클릭 후에만 이동하도록 구현되었다

Untitled

JavaScript Event

https://kmk3593.github.io/2022/06/24/javaScript_event/

Author

minkuen

Posted on

2022-06-24

Updated on

2022-07-09

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×