티스토리 뷰

Programming/JavaScript, jQuery

[jQuery 6강] 제이쿼리 이벤트

국브 2019. 3. 30. 00:00

 [jQuery 6강] 제이쿼리 이벤트 


이번글에서는 제이쿼리 이벤트에 대해서 알아보겠습니다.

자바스크립트에서도 동일하게 이벤트를 사용할수 있습니다.

자바스크립트에서의 이벤트를 다루기위해서는 많이 복잡하지만

제이쿼리에서 이벤트를 다루는것은 간결하게 되어있어 제이쿼리의 인기가 높아졌습니다.

특히 자바스크립트의 경우 브라우저별 별도로 이벤트를 다루어야하지만..

제이쿼리는 높은 최적화로 통일된것을 확인할수 있습니다.

자세히 들어가기전 이전글들을 링크해두겠습니다.


 이전 글 링크 


2019/03/22 - [Programming/JavaScript, jQuery] - [jQuery 1강] 제이쿼리 개요 및 개발환경구축

2019/03/26 - [Programming/JavaScript, jQuery] - [jQuery 2강] 제이쿼리 기본문법

2019/03/27 - [Programming/JavaScript, jQuery] - [jQuery 3강] 선택자

2019/03/28 - [Programming/JavaScript, jQuery] - [jQuery 4강] 제이쿼리 DOM (문서객체)

2019/03/29 - [Programming/JavaScript, jQuery] - [jQuery 5강] 제이쿼리 기본함수 (기본 메서드)



 이벤트 문법


제이쿼리에서도 자바스크립트와 동일하게 클릭, 더블클릭, 마우스 이동 등 다양한 이벤트가 있습니다.

이벤트종류에 알아보기전..

이벤트를 사용하기위한 제이쿼리의 기본적 문법은 다음과 같습니다.


 사용방법 및 문법 


$("선택자").이벤트(function(){  });



 다양한 이벤트 (click, dblclick, mousedown, mouseup, mouseover, mouseout, mouseenter, mouseleave)


위에서도 말씀드린다싶이 자바스크립트의 이벤트의 대부분의 이벤트는

제이쿼리에서 사용이 가능합니다.

그럼 하나씩 살펴보도록 하겠습니다.


 사용방법 및 문법 


1. 마우스 한번클릭


click();


2. 마우스 더블클릭


dblclick();


3. 마우스가 눌렸을때


mousedown();


4. 마우스가 눌림에서 풀렸을때


mouseup(); 


5. 마우스가 움직일때


mousemove();


6. 마우스가 위에올라왔을때


mouseover();


7. 마우스가 빠져나갔을때


mouseout();


8. 마우스가 들어왔을때


mouseenter();


9. 마우스가 떠날때


mouseleave();



 예제 

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
<%@ 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" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        $("#box1").click(function() {
            console.log("마우스 한번클릭");
        });
        
        $("#box1").dblclick(function() {
            console.log("마우스 더블클릭");
        });
        
        $("#box1").mousedown(function() {
            console.log("마우스 눌림");
        });
        
        $("#box1").mouseup(function() {
            console.log("마우스 눌림 풀림");
        });
        
        $("#box1").mousemove(function() {
            console.log("마우스 움직임");
        });
        
        $("#box1").mouseover(function() {
            console.log("마우스 위에 올라옴");
        });
        
        $("#box1").mouseout(function() {
            console.log("마우스 빠져나감");
        });
        
        $("#box1").mouseenter(function() {
            console.log("마우스 들어옴");
        });
        
        $("#box1").mouseleave(function() {
            console.log("마우스 떠남");
        });
        
        
    })
 
</script>
<style type="text/css">
    .box1 {background-color: gray; width: 300px; height: 30px;}
</style>
</head>
<body>
    <div class="box1" id="box1">첫번째 빡스</div>
</body>
</html>
cs


 실행결과 및 설명 


위와같은 결과를 얻을수 있습니다.

이벤트 함수별로 콘솔로 출력되었습니다.

(문법에서 이미 함수의 기능을 설명하였기에.. 자세한 설명은 생략하였습니다.)




 폼(양식) 이벤트 (submit, reset)


폼이란 웹사이트의 양식폼을 이야기합니다.

(로그인, 회원가입, 설문 등등..)

폼 이벤트또한 자바스크립트에서 지원을합니다.

하지만 제이쿼리의 폼이벤트를보면 더욱더 간결하게 작성하여 사용할수 있습니다.


 사용방법 및 문법 

1. 전송


submit();


2. 초기화


reset();



 예제 

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
<%@ 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" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(function (){
        
        $("#loginBt").click(function (){
            if($("input[name='uid']").val() == ""){
                alert("아이디를 입력하세요");
            } else if ($("input[name='upw']").val() == ""){
                alert("비밀번호를 입력하세요");
            } else {
                $("#loginForm").submit();
            }
        });
        
        $("#resetBt").click(function (){
            $("#loginForm")[0].reset();
        });
    })
 
</script>
</head>
<body>
    <form id="loginForm" action="https://www.naver.com">
        ID : <input name="uid" type="text">
        <br/>
        PW : <input name="upw" type="password">
        <br/>
        <input id="loginBt" type="button" value="login">
        <input id="resetBt" type="button" value="reset">
    </form>
</body>
</html>
cs


 실행결과 및 설명 



아이디와 패스워드를 입력후 "login" 버튼을 누르면 네이버로 이동하는것을 살펴볼수 있으며..


아이디와 패스워드를 입력후 "reset" 버튼을 누르면 초기화되는 것을 확인할수 있습니다.


html 구문쪽은 다음과같이 로그인 양식폼으로 간단하게 작성하였습니다.

<body>
    <form id="loginForm" action="https://www.naver.com">
        ID : <input name="uid" type="text">
        <br/>
        PW : <input name="upw" type="password">
        <br/>
        <input id="loginBt" type="button" value="login">
        <input id="resetBt" type="button" value="reset">
    </form>
</body>


스크립트 영역을 살펴보도록 하겠습니다

<script type="text/javascript">
    
    $(function (){
        
        $("#loginBt").click(function (){
            if($("input[name='uid']").val() == ""){
                alert("아이디를 입력하세요");
            } else if ($("input[name='upw']").val() == ""){
                alert("비밀번호를 입력하세요");
            } else {
                $("#loginForm").submit();
            }
        });
        
        $("#resetBt").click(function (){
            $("#loginForm")[0].reset();
        });
    })
 
</script>

스크립트영역에는 click 함수로 2개의 코드가 작성되어 있습니다.
처음 click 함수는..

       $("#loginBt").click(function (){
            if($("input[name='uid']").val() == ""){
                alert("아이디를 입력하세요");
            } else if ($("input[name='upw']").val() == ""){
                alert("비밀번호를 입력하세요");
            } else {
                $("#loginForm").submit();
            }
        });

아이디가 "loginBt" 인 태그를 클릭하면 아이디 검사, 패스워드 검사후 이상이 없을시
$("#loginForm").submit();
을 실행하였습니다.
즉 아이디가 "loginForm" 의 폼을 submit 하여 action 주소값으로 이동하여 네이버페이지가 뜨는것을 확인할수 있습니다.

두번째 click 함수는..

       $("#resetBt").click(function (){
            $("#loginForm")[0].reset();
        });

아이디가 "resetBt" 인 태그를 클릭하면 
$("#loginForm")[0].reset();
을 실행합니다.
근대 특이하게도 배열의 첫번째를 선택하였습니다.
왜 뜬금없이 배열을 선택하여 reset 함수를 실행한것일까요?
그이유는 폼 객체는 리스트로 입력되어 있습니다.
즉 누가봐도 하나뿐인 객체를 갖어와도 리스트이기때문에.. 위와같이 리스트로 접근하여야합니다.
리스트로 접근하여 reset 함수를 실행하면..
위와같이 input 태그들의 값이 초기화 되는것을 확인할수 있습니다.



 this (이벤트가 발색한 객체), event (발생한 이벤트)


자바스크립트의 글과 동일한 개념입니다.

이벤트가 발생하고 발생한 이벤트를 처리하는 함수에서 this 를 사용하면 이벤트가 발생한 객체를 확인할수 있으며

함수에 매개변수를 설정하면 발생한 event 를 확인할수 있습니다.

이번에는 바로 예제를 통해 알아보도록하겠습니다.


 예제 

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
<%@ 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" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   
    $(function(){
        
        function clickEvent(event){
            console.log(this);
            console.log(event);            
        };
        
        $("#divBox").click(clickEvent);
             
    });
    
</script>
</head>
<body>
    <div id="divBox">박스</div>
</body>
</html>
cs


 실행결과 및 설명 


콘솔 실행결과의 이미지 입니다.

(div 영역을 클릭했을때의 결과)


html 영역은 다음과 같습니다.

<body>
    <div id="divBox">박스</div>
</body>


스크립트 영역입니다.

<script type="text/javascript">
   
    $(function(){
        
        function clickEvent(event){
            console.log(this);
            console.log(event);            
        };
        
        $("#divBox").click(clickEvent);
             
    });
    
</script>

 

스크립트 영역에서는 "clickEvent" 라고 미리 함수를 생성한후

"divbox" 라는 id 를 갖은 요소를 클릭하면 함수를 실행되도록 하였습니다.


clickEvent의 함수를 자세히살펴보도록 하겠습니다.

       function clickEvent(event){
            console.log(this);
            console.log(event);            
        };

함수에서는 매개변수 "event" 를 받았으며..

함수의 실행문을 살펴보면 this 와 event 를 콘솔로 출력하였습니다.

하지만 클릭이벤트가 일어날때 를 살펴보면..

$("#divBox").click(clickEvent);

매개변수를 넘겨준적이 없으습니다.

즉 발생한 이벤트와 발생된 객체가 자동적으로 실행함수로 넘어가게 됩니다.

그래서 발생된 객체를 사용하려면 this 를 사용하면되고..

발생된 이벤트를 사용하려면 매개변수를 사용하면됩니다.

콘솔로 확인한결과는 위와같이 출력되는것을 확인할수 있습니다.




 글을 마치며..


이번글을 통해서 제이쿼리 이벤트에 대해서 알아보았습니다.

자바스크립트에서도 동일하게 이벤트를 처리가 가능하지만..

제이쿼리의 간결함과 통일성으로 많은사람들이 제이쿼리로 이벤트를 처리하고있습니다.

그렇기에 꼭! 숙지하시고 더 많은 이벤트 함수를 알고싶다면 제이쿼리 api 문서를 참고바랍니다.

이번글까지를 통해 제이쿼리 기본강의 글을 작성하였습니다. 

대부분의 필요한 제이쿼리 기본기능들은 모두 소개를 해드렸습니다.

이상으로 제이쿼리 글을 마치도록 하겠습니다.

모두 수고하세요! 


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

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


구독을 원하시면 PC로 접속하여

좌측 하단의 "국브스토리 구독하기" 버튼을 눌러주세요!



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

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

[jQuery 5강] 제이쿼리 기본함수 (기본 메서드)  (0) 2019.03.29
[jQuery 4강] 제이쿼리 DOM (문서객체)  (0) 2019.03.28
[jQuery 3강] 선택자  (0) 2019.03.27
[jQuery 2강] 제이쿼리 기본문법  (0) 2019.03.26
[jQuery 1강] 제이쿼리 개요 및 개발환경구축  (0) 2019.03.22
댓글