[javascript 16강] 이벤트 종류

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            window.onload = function(){
                
                var divOb = document.getElementById("firstDiv");
                
                divOb.addEventListener("click", function(){
                    console.log("click");
                }, false);

                divOb.addEventListener("mouseover", function(){
                    console.log("mouseover");
                }, false);
                
                divOb.addEventListener("mouseout", function(){
                    console.log("mouseout");
                }, false);
                
                divOb.addEventListener("mousemove", function(){
                    console.log("mousemove");
                }, false);
                
                divOb.addEventListener("mousedown", function(){
                    console.log("mousedown");
                }, false);
                
                divOb.addEventListener("mouseup", function(){
                    console.log("mouseup");
                }, false);
                
                divOb.addEventListener("dblclick", function(){
                    console.log("dblclick");
                }, false);
 
            }
        
            
        </script>
    </head>
    <body>
        <div id="firstDiv" style="width: 100px; height: 100px; background-color: black;" ></div>
    </body>
</html>
Colored by Color Scripter
cs

실행결과 및 설명

미리 만들어놓은 div 태그입니다.

div 태그에서 이벤트를 발생시켜본 결과입니다..

"사용방법 및 문법" 에 설명이 다있어 자세한 설명은 넘어가도록 하겠습니다.

폼 이벤트

폼이벤트는 폼의기능인 reset, submit 등을 자바스크립트로 실행하는것입니다.

만약 input 태그의 타입이 버튼이면거나 하면 기본적인 기능이 없는 태그이기에

스크립트에서 버튼이 눌릴때 추가적인 기능이나 폼기능을 넣어줄수 있습니다.

사용방법 및 문법

1. 리셋기능 (초기화)

객체변수명.reset();

2. 서브밋기능 (전송)

객체변수명.submit();

예제

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            window.onload = function(){
                
                var userForm = document.userForm;
                
                document.getElementById("resetBt").onclick = function(){
                    
                    userForm.reset();
                    
                };
                
                document.getElementById("submitBt").onclick = function(){
                    
                    if(userForm.id.value == "" || userForm.id.value == null){
                        alert("아이디를 입력하세요");
                        return false;
                    }
                    
                    if(userForm.pw.value == "" || userForm.pw.value == null){
                        alert("비밀번호를 입력하세요");
                        return false;
                    }
                    
                    userForm.submit();
                };
            }
            
        </script>
    </head>
    <body>
        <form name="userForm" action="https://www.google.com">
            id : <input type="text" name="id"><br/>
            pw : <input type="password" name="pw"><br/>
            <input id="resetBt" value="리셋" type="button">
            <input id="submitBt" value="로그인" type="button">
        </form>
    </body>
</html>
Colored by Color Scripter
cs

실행결과 및 설명

처음 실행시 위와같이 로그인 창이 나옵니다.

소스는 아래와 같습니다.

        <form name="userForm" action="https://www.google.com">

            id : <input type="text" name="id"><br/>

            pw : <input type="password" name="pw"><br/>

            <input id="resetBt" value="리셋" type="button">

            <input id="submitBt" value="로그인" type="button">

        </form>

id 와 pw 를 input 태그로 type 은 text, password 로 만들어주었고

버튼또한 input 태그로 type 을 button 으로 만들어 주었습니다.

아무입력도 없이 로그인 버튼을 누르면 "아이디를 입력하세요" 라는 경고창이나오고..

아이디만 입력하고 로그인 버튼을 누르면 "비밀번호를 입력하세요" 라는 경고창이나옵니다.

그소스를 보도록 하겠습니다.

                document.getElementById("submitBt").onclick = function(){

                    if(userForm.id.value == "" || userForm.id.value == null){

                        alert("아이디를 입력하세요");

                        return false;

}

                    if(userForm.pw.value == "" || userForm.pw.value == null){

                        alert("비밀번호를 입력하세요");

                        return false;

}

                    userForm.submit();

};

우선 onload 안에 있습니다. 즉 모두 로드된후에 스크립트가 실행되도록 하였습니다.

getElementById 를통해 아이디가 "submitBt" 인 버튼을 객체로 잡아주고 onclick 속성으로 함수를 넣어주었습니다.

함수안의 실행문에는 3가지 실행을 합니다. 아이디 체크, 페스워드 체크, 다음 submit() 함수로 전송 입니다.

                    if(userForm.id.value == "" || userForm.id.value == null){

                        alert("아이디를 입력하세요");

                        return false;

}

우선 아이디 체크를 하기위해 form 객체를 저는 최상단에 잡아주었습니다.( var userForm = document.userForm; )

다음 form 객체의 name 값이 id 의 객체에 접근하여 value 값을 뽑아

"" 또는 null 값인지 if 조건으로 확인하였고..

만약 조건이 맞는다면 "아이디를 입력하세요" 라는 경고창이나오고

return false 구문을 만나 스크립트는 종료됩니다.

                    if(userForm.pw.value == "" || userForm.pw.value == null){

                        alert("비밀번호를 입력하세요");

                        return false;

}

패스 워드체크를 하기위해 form 객체를 사용합니다.( var userForm = document.userForm; )

form 객체의 name 값이 pw의 객체에 접근하여 value 값을 뽑아

"" 또는 null 값인지 if 조건으로 확인하였고..

만약 조건이 맞는다면 "비밀번호를 입력하세요" 라는 경고창이나오고

return false 구문을 만나 스크립트는 종료됩니다.

만약 위의 두 조건을 만족하지 않으면 userForm.submit(); 구문을 만나게 됩니다.

이제서야 전송이되며 폼테그의 액션 action="https://www.google.com" 으로 이동하게 됩니다.

그결과 아래와같이 구글 사이트로 이동하게 됩니다.

그럼 다시 돌아와 이번엔 리셋이벤트를 확인해보겠습니다.

아래와 같이 id, pw 워드를 모두 입력했습니다.

다음 "리셋" 버튼을 눌러보았습니다.

리셋이되어 모두 초기화가 된것을 확인할수 있습니다.

그럼 리셋부분의 소스코드를 확인해 보겠습니다.

                document.getElementById("resetBt").onclick = function(){

                    userForm.reset();

};

getElementById 를통해 아이디가 "resetBt" 인 버튼을 객체로 잡아주고 onclick 속성으로 함수를 넣어주었습니다.

함수안의 실행문에는 한가지를 실행합니다. 바로 리셋 이벤트 입니다.

리셋이벤트를 사용하기위해 form 객체를 사용합니다.( var userForm = document.userForm; )

폼객체를 잡아둔 변수 userForm 에 reset() 함수를 사용하여

위와같이 초기화를 시킬수 있습니다.

글을 마치며..

이렇게해서 이번글에서는 이벤트 종류에 대해서 알아보았습니다.

이벤트 종류도 많이 쓰입니다.

특히 폼 이벤트는 정말로 많이 쓰입니다.

그렇기에 꼭 알아두세요!

지금까지 1강부터 16강 까지 자바스크립트 글에 대해서 작성하였습니다.

16강까지 작성해보니 자바스크립트 기초 및 문법은 모두 작성한것 같습니다.

특히 많이 쓰이는 부분또한 모두 작성한것 같습니다.

이렇게 모두 알고있는다면 자바스크립트 영역은 문제가 없을것같습니다.

이번글을 마지막으로 자바스크립트 글을 마치도록하고..

자바스크립트를 배웠으니..

한단계 나아가 훨씬 편하고.. 더많이 쓰이는..

제이쿼리 글을 작성하도록 하겠습니다.

모두 수고하세요!

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!

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

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[jQuery 2강] 제이쿼리 기본문법 (0)	2019.03.26
[jQuery 1강] 제이쿼리 개요 및 개발환경구축 (0)	2019.03.22
[javascript 15강] 이벤트 (0)	2019.02.21
[javascript 14강] DOM (문서 객체) (0)	2019.02.19
[javascript 13강] BOM (브라우저 객체) (0)	2019.02.18

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	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

글 보관함

국브스토리

티스토리 뷰