제이쿼리는 자바스크립트 라이브러리를 이용해 만든 언어입니다. 라이브러리는 자주 사용하는 코드를 재사용 및 효율성 있게 사용할 수 있도록 만들어진 함수의 집합을 의합니다.

제이쿼리는 HTML에 포함되어 있는 클라이언트 사이트 스크립트 언어를 단순화하도록 설계된 웹 브라우저 호환성을 가진 자바스크립트 라이브러리입니다.

  1. 제이쿼리는 CSS를 쉽게 적용할 수 있습니다.
  2. 제이쿼리는 크로스브라우징을 지원합니다.
  3. 제이쿼리는 플러그인이 풍부합니다.
  4. 제이쿼리는 코드를 적게 효율적으로 작성할 수 있습니다.
  5. 제이쿼리는 좋은 확장성과 Ajax 기능을 구현합니다.

제이쿼리 라이브러리 파일은 jquery.com 사이트에서 다운받아 연동합니다.

제이쿼리 사이트 / 라이브러리 파일 다운로드

기본 설정 View

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Sample01</title>

    <!-- jquery 설정 -->
    <script src="assets/js/jquery-1.12.4.min.js"></script>

    <!-- jquery UI 설정 -->
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>

    <!-- 구글  CDN 설정 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

</head>
<body>
제이쿼리를 쓰기 위한 준비 작업입니다.
jQuery(document).ready(function(){
      //실행코드
});
jQuery를 $로도 사용할 수 있습니다.
$(document).ready(function(){
      //실행코드
});
생략하여 사용 할 수 있습니다.
$(function(){
      //실행코드
});
자바스크립트
window.onload = function(){
      //실행코드
};
설정 View


제이쿼리 선택자는 HTML 태그를 선택하여, 제이쿼리 기능을 쉽게 구현할 수 있습니다.

$("선택자").메서드(매개변수, 함수);
종류 예시 설명
태그 선택자 $("p") 기본 태그를 선택합니다.
클래스 선택자 $(".class") 클래스 태그를 선택합니다.
아이디 선택자 $("#id") 아이디 태그를 선택합니다.
그룹 선택자 $("#id, p, .class") 여러가지 태그를 선택합니다.
전체 선택자 $("*") 전체 태그를 선택합니다.
종류 예시 설명
자손 선택자 $("div p") 자식(하위) 태그 모두 선택합니다.
child 선택자 $("div > p") 자식(하위) 태그만 선택합니다.(자손은 포함안됨)
sibling 선택자 $("div + p") 자식 태그 다음 형제 태그를 선택합니다.
siblings 선택자 $("div ~ p") 자식 태그 다음 모든 형제 태그를 선택합니다.
종류 예시 설명
[name="value"] $("li a[href='#page']") 속성 중에 #page와 일치하는 속성을 선택합니다.
[name^="value"] $("li a[href^='http']") 속성 중에 http로 시작하는 속성을 선택합니다.
[name$="value"] $("li a[href$='com']") 속성 중에 com으로 끝나는 속성을 선택합니다.
[name*="value"] $("li a[href*='web']") 속성 중에 "web"이 포함되어 있는 속성을 선택합니다.
[name!="value"] $("li a[href!='naver']") 속성 중에 "naver"이 포함되어 있는 않는 속성을 선택합니다.
[name="value"][name="value"] $("li a[href][class]") 속성 중에 "href"와"class"속성이 있는 속성을 선택합니다.
종류 설명
:animated show, hide, slideDown, SlidUp등의 애니메이션 태그를 선태가합니다.
:eq(index) 선택된 태그들의 인덱스 번호를 통해 선택합니다.
:gt(index) 선택된 집합에서 인덱스보다 큰 인덱스를 가지고 있는 태그를 선택합니다.
:lt(index) 선택된 집합에서 인덱스보다 작은 인덱스를 가지고 있는 태그를 선택합니다.
:header 제목 요소(h1~h6) 태그들을 선택합니다.
:first 선택된 요소 중에서 첫 번째 요소를 찾아 선택합니다.
:last 선택된 요소 중에서 마지막 번째 요소를 찾아 선택합니다.
:odd 선택된 요소 중에서 홀수 번째 요소를 찾아 선택합니다.
:even 선택된 요소 중에서 짝수 번째 요소를 찾아 선택합니다.
:not() 현재 선택한 요소의 반대 요소를 선택합니다.
종류 설명
:contains() ()안의 텍스토와 일치하는 문자열이 요소의 내용 중에 있을 때 선택합니다.
:empty 요소에 텍스트가 없을 때 선택합니다.
:has() 요소 내부에 찾고 싶은 태그를 후손 요소까지 살펴본 후 있으면 선택합니다.
:parent empty와 반대 요소로 텍스트가 존재할 때 선택합니다.

컨텐츠 영역을 보이지 않게 방법

  • display: none;
  • visibility: hidden;
  • opacity: 0;
  • width:0; height:0;
  • form 요소 중에 type="hidden"
  • 부모요소가 보이지 않거나 숨겨져 있을 때

visibility: hidden이나 opacity:0;은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다.

종류 설명
:hidden 보이지 않는 요소를 선택합니다.
:visible 보이는 요소를 선택합니다.
종류 설명
:first-child 첫 번째 자식 요소를 선택합니다.
:last-child 마지막 번째 자식 요소를 선택합니다.
:nth-child(index) index 번째 자식 요소를 선택합니다.
:nth-child(even) 짝수 번째 자식 요소를 선택합니다.
:nth-child(odd) 홀수 번째 자식 요소를 선택합니다.
:nth-child(2n) 2배수 번째 자식 요소를 선택합니다.
only-child 자식 요소가 오직 하나인 요소를 선택합니다.
종류 설명
:input 모든 입력 양식을 선택합니다.
:file 파일 업로드 양식을 선택합니다.
:hidden 숨겨진 입력 양식을 선택합니다.
:image 이미지 입력 양식을 선택합니다.
:password 암호 입력 양식을 선택합니다.
:radio 라디오 버튼 입력 양식을 선택합니다.
:reset 리셋 입력 양식을 선택합니다.
:submit 데이터 보내기 입력 양식을 선택합니다.
:text 텍스트 박스 양식을 선택합니다.
설정 View


제이쿼리의 선택자를 기준으로 선택한 요소 중 원하는 요소를 다시한번 더 선택할 수 있는 탐색과 관련된 제이쿼리 메서드입니다. 탐색은 크게 트리구조와 필터로 나눌 수 있습니다.

종류 설명
.children() 선택한 요소의 모든 자식 요소를 선택합니다.(자손 요소는 포함안됨)
.find() 선택한 요소의 자손 요쇼 중 조건에 맞는 요소를 선택합니다.
.next() 선택한 요소의 다음 형제 요소를 선택합니다.
.nextAll() 선택한 요소의 다음 모든 형제 요소를 선택합니다.
.parent() 선택한 요소의 부모 요소를 선택합니다.
.parents() 선택한 요소의 모든 부모 요소를 선택합니다.
.prev() 선택한 요소의 이전 형제 요소를 선택합니다.
.prevAll() 선택한 요소의 이전 모든 형제 요소를 선택합니다.
.closest() 선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.
.nextUntil() 다음에 위치한 요소를 조건에 맞을 때까지 찾습니다.
.parentUntil() 조건이 참이 될 때까지 부모요소를 찾습니다.
.prevUntil() 이전에 위치한 요소를 조건에 맞을 때까지 찾습니다.
.siblings() 형제 요소를 모두 찾습니다.
트리구조탐색 View


종류 설명
.eq() 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 선택한 요소 집합에서 선택자를 추출하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
.first() 선택한 요소 집합에서 첫번째 자식 요소를 선택합니다.
.last() 선택한 요소 집합에서 마지막번째 자식 요소를 선택합니다.
.has() 선택된 요소들이 자신의 자식요소에서 주어진 선택자가 있는지 확인하여 선택합니다.
.map() 대상이 되는 요소 집합에서 배열을 새롭게 변경합니다.
.not() 조건에 맞지 않는 것들만 찾아서 선택합니다.
.slice() 선택된 집합에서 조건의 범위를 재선택합니다.
트리구조탐색 View


종류 설명
.add() 문서 객체를 추가적을 선택합니다.
.addBack() 선택한 요소의 이전 선택된 요소를 추가 선택합니다.
.contents() 선택한 요소를 포함하여 자식 요소를 선택합니다.
.each() 여러개의 요소를 순차적으로 선택할 때 사용합니다.
.end() 문서 객체 선책을 한 단계 뒤로 돌립니다.
each View


Manipulation은 DOM 구조를 변경 할 수 있는 제이쿼리 메서드입니다.

종류 설명
.clone() 선택한 요소를 복사합니다.
.unwrap() 선택한 요소의 부모 요소를 삭제합니다.
.wrap() 선택한 요소의 새로운 요소를 추가합니다.
.wrapAll() 선택한 요소의 새로운 요소를 한꺼번에 추가합니다.
.wrapInner() 선택한 요소의 새로운 요소를 각각 추가합니다.
.append() 선택한 요소 마지막 위치에 새로운 요소를 추가합니다.
.appendTo(target) 선택한 요소(타겟) 마지막 위치에 새로운 요소를 추가합니다.
.prepend() 선택한 요소 처음 위치에 새로운 요소를 추가합니다.
.prependTo(target) 선택한 요소(타겟) 처음 위치에 새로운 요소를 추가합니다.
.after() 선택한 요소 다음 위치에 새로운 요소를 추가합니다.
.before() 선택한 요소 이전 위치에 새로운 요소를 추가합니다.
.insertAfter(target) 선택한 요소(타겟) 다음 위치에 새로운 요소를 추가합니다.
.insertBefore(target) 선택한 요소(타겟) 이전 위치에 새로운 요소를 추가합니다.
.empty() 선택한 요소의 하위 내용을 삭제합니다.
.remove() 선택한 요소를 삭제합니다.
.replaceAll() 선택한 요소를 새로운 요소를 바꿉니다.
.html() 선택한 요소의 HTML을 읽고 쓸 수 있습니다.
.text() 선택한 요소의 텍스트를 읽고 쓸 수 있습니다.
변경 View


append View


문서 객체의 속성과 관련된 기능을 처리해주는 제이쿼리 메서드입니다.

종류 설명
.attr() 새로운 속성을 생성하거나 기존의 속성을 변경할 때 사용합니다.
.prop() 선택한 요소에 속성을 반환, 생성, 변환 할 때 사용합니다.
.removeAttr() 선택한 요소에서 기존의 속성을 삭제합니다.
.removeProp() 선택한 요소에서 기존의 속성을 삭제합니다.
.val() 입력 요소에 있는 속성 값을 불러오거나 변경 할 때 사용합니다.
attr을 이용한 탭 메뉴 만들기 View


위치와 크기를 읽고 설정하는 제이쿼리 메서드입니다.

종류 설명
.width() 어떤 요소의 가로 크기를 반환하거나 변경합니다.
.height() 어떤 요소의 세로 크기를 반환하거나 변경합니다.
.innerWidth() padding 값을 포함한 가로 크기를 반환하거나 변경합니다.
.innerHeight() padding 값을 포함한 세로 크기를 반환하거나 변경합니다.
.outerWidth() padding 값과 border 값을 포함한 가로 크기를 반환하거나 변경합니다.
.outerHeight() padding 값과 border 값을 세로 크기를 반환하거나 변경합니다.
dimensions View


레이어 팝업 View


종류 설명
.offset() 웹 문서를 기준으로 위치 값을 읽어오며, left와 top의 속성을 x축 y축의 좌표를 알려줍니다.
.position() 기준점을 통해 선택한 요소의 위치값을 읽어오며, left와 top의 속성을 x축 y축의 좌표를 알려줍니다.
.scrollLeft() 브라우저 요소의 가로 스크롤 이동 값을 가져옵니다.
.scrollTop() 브라우저 요소의 세로 스크롤 이동 값을 가져옵니다.
offset, position View


scrollLeft, scrollTop View


종류 설명
.css() css()요소 갑슬 알아낼 수도 있고, 설정도 할 수 있습니다.
.addClass() 특정한 클래스 요소를 추가할 수 있습니다.
.hasClass() 특정한 클래스가 있는지 찾을 수 있습니다
.removeClass() 특정한 클래스를 요소에서 제거할 수 있습니다.
.toggleClass() 특정한 클래스의 추가 제거를 한번에 할 수 있습니다.
addClass를 이용한 탭 메뉴 만들기 View


탭 메뉴 만들기 View


다양한 움직임과 효과를 줄 수 있는 제이쿼리 메서드입니다.

$(selector).method();
$(selector).method(duration);
$(selector).method(duration, callback);
$(selector).method(duration, eading, callback);

duration: 이펙트가 지속되는 시간을 의미합니다. 1/1000밀리세컨드 단위이며, 'slow','normal','fast'표현합니다.
easing : 이펙트 스피드를 조절하는 효과입니다.
callback : 콜백함수는 스스로 호출되는 함수의 의미로 애미메이션 효과가 완료되면 자동으로 호출되는 함수를 말합니다.
종류 설명
.hide() 선택한 요소를 숨깁니다.
.show() 선택한 요소를 보여줍니다.
.toggle() 숨겨져 있던 요소를 노출시키고, 노출되어 있던 요소는 숨깁니다.
.fadeIn() opacity를 0에서 1로 전환하면서 서서히 나타나게 처리합니다.
.fadeOut() opacity를 1에서 0로 전환하면서 서서히 사라지게 처리합니다.
.fadeToggle() fadeIn()과 fadeOut()을 번갈아 가면서 실행합니다.
.fadeTo() 불투명도를 지정하여 fade를 조절합니다.
.slideDown() 슬라이딩 스타일로 요소를 보이게 합니다.
.slideUp() 슬라이딩 스타일로 요소를 숨기게 합니다.
.slideToggle() slideDown()과 slideUp()을 번갈아 가면서 실행합니다.
effect View


$(selector).animate(properties);
$(selector).animate(properties,duration);
$(selector).animate(properties,duration,easing);
$(selector).animate(properties,duration,easing,collback);

properties에 올수 있는 값
border, margin, padding, height, width, font-size, left, top, bottom, right, line-height
properties에 올수 없는 값
background-color, 축약형

//폰트 사이즈를 현제 크기에서 20px로 2초동안 애니메이션 한다.
$("selector").animate({fontSize:"20px"},2000);
$("selector").animate({"fontSize":"20px"},2000);
//선택한 요소의 왼쪽 마진 값을 100px로 600밀리세컨드 동안 애니메이션 합니다.
$("selector").animate({marginLeft:100,marginRight:100},600);
$("selector").animate({"marginLeft":"100","marginRight":"100"},"slow");
종류 설명
.animate() 선택한 요소에 애니메이션을 적용합니다.
.stop() 실행중인 애니메이션을 정지합니다.
.delay() 애니메이션 효과를 지연합니다.
.queue() 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다.
.clearQueue() 첫 번째 큐에 해당하는 효과 또는 애니메이션만 실행하고 대기 중인 큐를 모두 삭제합니다.
.dequeue() 스택에 쌓인 큐를 모두 제거합니다.
.finish() 선택한 요소의 진해중인 애니메이션을 강제로 종료합니다.
Animate View


Animate2View


Animate3 - 무한 로프 View


브라우저에서 사용자가 취하는 모든 동작을 이벤트라고 합니다. 마우스로 클릭을 하거나 마우스를 올리는 행위가 이벤트에 해당되며, 이벤트 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 합니다.

종류 설명
.bind() 선택한 요소에 한개 이상의 이벤트를 등록할 수 있습니다.
.unbind() 선택한 요소에 이벤트를 제거합니다.
.delegate() 선택한 요소의 지정된 하위 요소에 이벤트를 등록합니다.
.undelegate() 선택한 요소의 지정된 하위 요소에 이벤트를 제거합니다.
.on() 선택한 요소의 이벤트를 설정합니다.
.off() 선택한 요소의 이벤트를 제거합니다.
.triggle() 선택한 요소의 이벤트를 수동으로 발생시킵니다.

jQuery 1.9버전 이전에는 bind(),delegate(),live() 이벤트가 있었지만 1.9버전 이후에는 on()으로 통일되었습니다.

종류 설명
.click() 선택한 요소를 클릭했을 때 이벤트가 발생합니다.
.dbclick() 선택한 요소를 더블 클릭했을 때 이벤트가 발생합니다.
.hover() 선택한 요소에 마우스를 올렸을 때(mouseenter)와 벗어 났을 때 (mouseleave) 각각 이벤트가 발생합니다.
.mousedown() 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
.mouseout() 선택한 요소에서 마우스가 벗어 났을 때 이벤트가 발생합니다.
.mouseover() 선택한 요소에서 마우스를 올렸을 때 이벤트가 발생합니다.
.mouseup() 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다.
.mouseenter() 선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다.
.mouseleave() 선택한 요소 범위 내에서 마우스가 벗어 났을 때 이벤트가 발생합니다.
.mousemove() 선택한 요소 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다.
글자 크기,폰트 변경하기 View

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>글자 크기,폰트 변경하</title>
    <style>
        body {font-size: 12px dotum, "돋움", sans-serif;}
    </style>
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(document).ready(function(){
            var size = 12;

            $(".zoom button").on("click",function(){
                var btn_index = $(this).index();
                //alert(btn_index);

                if(btn_index == 0){
                    size++;
                    $(".text-wrap").css("font-size", size+"px");
                } else if(btn_index == 2){
                    size--;
                    $(".text-wrap").css("font-size", size+"px");
                } else {
                    $(".text-wrap").css("font-size","12px");
                    size = 12;
                }
            });

            $("#fs").on("change",function(){
                $(".text-wrap").css("font-family",$(this).val());
            });



            
        });
    </script>
</head>
<body>
    <div class="btn">
        <div class="zoom">
            글자크기
            <button>+</button>
            <button>0</button>
            <button>-</button>
        </div> 
        <div class="font">
            폰트바꾸기
            <select id="fs" name="fs">
                <option value="Nonum Gothic,'나눔고딕'">나눔고딕</option>
                <option value="Nonum Myeongjo,'나눔명조'">나눔명조</option>
                <option value="Malgun Gothic,'맑은고딕'">맑은고딕</option>
                <option value="dotum,'돋움'">돋움</option>
                <option value="gulim,'굴림'">굴림</option>
                <option value="Gungsuh,'궁서'">궁서</option>
            </select>
        </div> 
    </div>

    <dvi class="text-wrap">
        <p>연재 초창기부터 주인공이 히든 캐릭터가 되었음에도 불구하고 어느 정도 적절히 갖춰진 밸런스에다가 예술계 직업이 주인공이라는 특이한 설정, 일반 양판소보다는 그나마 나아보이는 문체, 나름의 스토리 전개로 겜판소 중에서는 상당한 입지를 갖춘 작품이다. 분량이 20권이 넘어가면서부터 안좋은 시선이 상당히 늘어나며 여러 가지 단점들이 지적받고 있지만 그래도 여전히 높은 인기를 구가하는 중. 2010년 6월 8일자 기사에서 25만부 이상 팔렸다는 이야기가 나왔는데, 이 이야기대로라면 2011년 1월 쯤에는 30만부 돌파라는 소리. 2000년대 초반에 레드 오션이 되고 나서 계속된 추락으로 처참해진 지금의 장르문학 시장을 생각하면 어마어마한 성공이다. 그리고 2012년 7월 15일 작가가 밝히기로 40만부는 돌파했다고 한다. 어마어마하다. 2013년 1월에는 20쇄 증판. 2013년 10월 기준으로 60만부. 다만 외국 시장과는 연이 없는 상태. 작가 말로는 연락만 오면 팔고 싶은데 수출 제의가 전혀 없다고 한다. 왠지 안습. 권수를 보고 질린 게 아닐까 싶다 1권은 미국에서 출간한 적이 있었는데 그쪽 회사 문제로 인해 더 이상 출간되지 않고 있다고 한다.</p>
    </dvi>
</body>
</html>
탭 메뉴 만들기 View


이미지 오버 효과 View


마우스 오버 했을때 이미지 변경 효과 View


메서드 설명
.blur() 요소에서 포커스가 떠날 때 이벤트가 발생합니다.
.change() 요소에서 값이 변경될 때 이벤트가 발생합니다.
.focus() 요소에 포커스를 획득했을 때 이벤트가 발생합니다.
.focusin() 선택한 요소에 포커스가 맞추어지기 바로 전에 발생합니다.
.focusout() 선택한 요소에서 포커스가 사라지기 바로 전에 발생합니다.
.select() 입력 양식 텍스트를 선택했을 때 이벤트가 발생합니다.
.submit() submit 버튼을 누르면 이벤트가 발생합니다.
.reset() reset 버튼을 누르면 이벤트가 발생합니다.
select View


메서드 설명
.keydown() 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다.
.keypress() 선택한 요소에서 키보드를 계속 누르고 있을 때 이벤트가 발생합니다.
.keyup() 선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트가 발생합니다.
키보드View


메서드 설명
.resize() 웹 브라우저 사이즈의 변화가 있을 때 이벤트가 발생합니다.
.scroll() 웹 브라우저 스크롤의 변화가 있을 때 이벤트가 발생합니다.
.ready() 웹 페이지가 로딩 되었을 때 이벤트가 발생합니다.
.load() 문서를 불러 들일 때 이벤트가 발생합니다.
.unload() 해당 페이지를 빠져 나갈 때 이벤트가 발생합니다.
.error() 해당 페이지가 에러 났을 때 이벤트가 발생합니다.
.index() 이벤트가 발생한 요소의 인덱스 값을 반환합니다.
마우스 이비지 변경View


canvas(라인그리기)View


무한스크롤만들기View


메서드 설명
.altKey 이벤트 발생시 [Alt] 키를 누르고 있었는지 boolean으로 알려줍니다.
.ctrlKey 이벤트 발생시 [Ctrl] 키를 누르고 있었는지 boolean으로 알려줍니다.
.shiftKey 이벤트 발생시 [Shift] 키를 누르고 있었는지 boolean으로 알려줍니다.
.clintX document에서 스크롤 이동값을 제외하고 마우스의 x좌표 값을 알려줍니다.
.clintY document에서 스크롤 이동값을 제외하고 마우스의 y좌표 값을 알려줍니다.
.data 이벤트 생성시 매개변수 두 번째에 값을 넘겨주면, event의 프로퍼티를 통해서 전달됩니다.
.keyCode 이벤트 발생시 키보드의 키를 누르면 키의 고유값을 알려줍니다.
.offsetX 이벤트 발생시 이벤트의 대상으로 부터 마우스의 X좌표를 알려줍니다.
.offsetY 이벤트 발생시 이벤트의 대상으로 부터 마우스의 Y좌표를 알려줍니다.
.pageX document에서 스크롤 이동값을 포함한 마우스의 X좌표를 알려줍니다.
.pageY document에서 스크롤 이동값을 포함한 마우스의 Y좌표를 알려줍니다.
.screenX 모니터 화면을 기준으로 마우스의 X좌표 값을 알려줍니다.
.screenY 모니터 화면을 기준으로 마우스의 Y좌표 값을 알려줍니다.
.target 이벤트가 발생한 요소를 알려줍니다.
.type 발생한 이벤트의 타입명을 알려줍니다.