1. 마우스 핸들링

 

- 마우스 이벤트 객체의 프로퍼티

- onclick : HTML 태그가 클릭될 때

- ondblclick : 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function calc(){
            exp = document.getElementById("exp");
            result = document.getElementById("result");
            result.value = eval(exp.value);
        }
    </script>
</head>
<body>
        <h3> onclick, 계산기 만들기</h3>
        <hr>
        계산하고자 하는 수식을
        입력하고 계산 버튼을 눌러봐요.
        <br>
        <br> 
    <form>
        식 <input id="exp"><br>
        값 <input id="result">
        <input type = "button" value="계산" onclick="calc()">
    </form>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

2. 마우스 관련 이벤트 리스너

 

마우스 관련 이벤트 리스너 호출 경우

- onmousedown : 마우스 버튼을 누르는 순간

- onmouseup : 눌러진 버튼이 놓여지는 순간

- onmouseover : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함

- onmouseout : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함

- onmouseenter : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음

- onmouseleave : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음

- onwheel : HTML 태그에 마우스 휠이 구르는 동안 계속 호출

  위쪽으로 굴린 경우 : wheelDelta 프로퍼티 값 양수(120)

  아래쪽으로 굴린 경우 : wheelDelta 프로퍼티 값 양수(-120)

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var width = 1;
        function down(obj){
            obj.style.fontStyle = "italic";
        }
        function up(obj){
            obj.style.fontStyle = "normal";
        }
        function over(obj){
            obj.style.borderColor = "#E8D9FF";
        }
        function out(obj){
            obj.style.borderColor = "#D4F4FA";
        }
        function wheel(e, obj){
            if(e.wheelDelta<0){
                width--;
                if(width<0) width =0;
            }else{
                width++;
            }
            obj.style.borderStyle = "ridge";
            obj.style.borderWidth = width+"px";
        }
    </script>
</head>
<body>
    <h3>마우스 관련 이벤트</h3><hr>
    <div>
        마우스 관련 <span onmouseout="out(this)"
                         onmouseover="over(this)"
                         onmouseup="up(this)"
                         onmousedown="down(this)"
                         onmousewheel="wheel(event, this)">
            이벤트
        </span>가 발생합니다.
    </div>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

3. oncontextmenu

 

- HTML 태그 위에 마우스 오른쪽 버튼 클릭

 디폴트로 컨텍스트 메뉴(context menu) 출력 : ‘소스 보기’나 ‘이미지 다운로드’ 등의 메뉴

- oncontextmenu 리스너가 먼저 호출

 false를 리턴하면 컨텍스트 메뉴를 출력하는 디폴트 행동 취소

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function hideMenu(){
            alert("오른쪽 클릭 메뉴 금지");
            return false;
        }
        document.oncontextmenu = hideMenu;
    </script>
</head>
<body>
    <img src="media/beach2.png">
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

4. 이미지 로딩 완료와 onload

 

- Image 객체

 <img> 태그에 의해 생성되는 DOM 객체

 new Image(); 자바스크립트 코드에 의해 생성되는 객체

- onload : 이미지의 로딩이 완료되면 Image  객체에 발생하는 이벤트

- 새로운 이미지를 로딩하는 방법

 

 

5. 이미지 로딩시 주의할 점

 

- 잘못된 이미지 로딩 코드

  이미지를 로딩하여 이미지 폭을 알아내는 코드

- 문제점

  myImg.src = "banana.png"; 실행 직후 이미지 로딩 완료되지 않음

  var width = myImg.width; 이미지 로딩 완료전이면, myImg.width=0

 

- 코드 수정 : onload 리스너에서 이미지 폭을 알아내는 코드 작성

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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function changeImage(){
            sel = document.getElementById("sel");
            img = document.getElementById("myImg");
            img.onload = function(){//서버로부터 이미지가 로딩 될 때
                myspan = document.getElementById("mySpan");
                myspan.innerHTML = img.width + "x" + img.height;
            }
            index = sel.selectedIndex;
            //alert(index);
            img.src = sel.options[index].value;
        }
    </script>
</head>
<body onload="changeImage()">
    <h3>이미지 크기 출력하기</h3><hr>
    <form>
        <select id="sel" onchange="changeImage()">
            <option value="media/apple.png">사과
            <option value="media/banana.png">바나나
            <option value="media/mango.png">망고
        </select>
    <span id="mySpan">이미지 크기</span>
    </form>
    <p><img id="myImg" src="media/apple.png"></p>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

 

6. new Image()로 이미지 로딩과 출력

 

- 동적으로 이미지 객체 생성

 new Image()

 이미지 객체가 생겼지만 화면에 출력되지 않음

- new Image()의 이미지 객체에 이미지 로딩

- 로딩된 이미지 출력

 <img> 태그에 할당된 브라우저 공간에 이미지 출력

 

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var files = ["media/penguins.png", 
             "media/lighthouse.png",
             "media/Chrysanthemum.png",
             "media/Desert.png",
             "media/Hydrangeas.png",
             "media/Jellyfish.png",
             "media/Koala.png",
             "media/Tulips.png"];
        var imgs = new Array();
        for(i=0;i<files.length;i++){
            imgs[i] = new Image();//이미지 객체 생성
            imgs[i].src = files[i];//페이지 로딩 될 때 이미지가 미리 로딩된다.
        }
        var next = 1;
        function change(obj){
            obj.src = imgs[next].src;
            next++;
        }
    </script>
</head>
<body>
    <h3>new Image()로 이미지 로딩</h3><hr>
    이미지를 클릭하면 다음 이미지를 보여줍니다.<p>
    <img style="border:20px ridge #FFE08C;" src="media/Penguins.png"
    width="200" height="200" onclick="change(this)">
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

 

 

저작자표시 비영리 변경금지

'화면구현' 카테고리의 다른 글

라디오버튼과 체크박스  (0) 2020.03.12
onblur와 onfocus  (0) 2020.03.12
이벤트  (0) 2020.03.12
문서의 동적 구성  (0) 2020.03.12
document의 열기와 닫기, open()과 close()  (0) 2020.03.12
마우스 핸들링, oncontextmenu, 이미지 로드, onload, new Image() :: 2020. 3. 12. 22:25 화면구현
openclose

티스토리툴바