3. 이벤트

Index

Index 3. 이벤트 3.1 이벤트 3.2 jQuery 플러그인, jQuery와 함께 사용되는 플러그인

3. 이벤트

3.1 이벤트

이번에는 이벤트에 대해 알아보도록 하겠습니다. 웹 페이지에서 사용자는 버튼을 클릭하거나, 마우스를 스크롤 하거나, 필드의 내용을 바꾸는 등의 행동(action)을 합니다. 웹 페이지는 이러한 사용자의 행동에 대해 상호작용을 하여 이벤트를 발생시킵니다.

클릭 이벤트 CODE - hide

020.html


<p id="text"></p>
<div id="divOne" class="box"></div>
<p class="textTwo"></p>
<h1></h1>


.box {
    width: 100px;
    height: 100px;
    background-color: red;
    display : none;
  }


//JQuery - 요소 선택과 hide
  $('#text').text('Hello');
  $('#divOne').fadeIn(3000);
  $('.textTwo').text('안녕하세요');
  $('h1').text('WOW');

  // div 클릭했을 때 안 보이게 하기
  // dom이 준비되면 실행해라!
  $(function(){
    $("div").click(function(){
       $(this).hide();
    });
  })

현재 작성중인 html 코드에 다음을 적용해 보도록 하겠습니다. 이 코드에서는 <p>태그에서 .click()이라는 이벤트가 발생하면 <p> 태그에 해당하는 내용을 숨기도록 작성되었습니다. 이렇게 특정 요소의 이벤트를 제어하는 함수를 이벤트 핸들러(event handler)라 합니다.

아래 방식은 예전 방식이고 요즘은 사용하지 않습니다. 있다면 수정해야 합니다. 3.x에서는 지원하지 않기 때문이에요.


$(document).ready(function(){
    $("div").click(function(){
        $(this).hide();
    });
});


$(콜백함수_핸들러) // 권장
$(document).ready(콜백함수_핸들러) //비권장
$("document").ready(콜백함수_핸들러) //비권장

클릭 이벤트 CODE - animate

021.html


#box {
    width: 100px;
    height: 100px;
    opacity: 0.3;
    background-color: red;
  }


<button type="button" id="btn_ani">클릭해주세요!</button>
<div id="box"></div>


// JQuery - animate
// 버튼 클릭했을 때 변화주기
// 'slow' 대신 ms 단위로도 줄 수 있습니다.
$('#btn_ani').click(function() {
  $('#box').animate({
    width: '300px',
    height: '300px',
    opacity: 1,
  }, 'slow');
});

호버 이벤트 CODE

022.html


#box {
    width: 100px;
    height: 100px;
    border: solid 1px #dbdbdb;
  }


<div id="box"></div>


//hover - 색 변경하기(호버 되었을 때 yellow, 호버에서 벗어났을 때 blue)
$("#box").hover(function(){
  $(this).css("background-color", "yellow");
}, function(){
  $(this).css("background-color", "blue");
});

마우스 이벤트 CODE


$("#p1").mouseenter(function(){
	alert("You entered p1!");
});
$("#p1").mouseleave(function(){
	alert("Bye! You now leaved p1!");
});

이번에는 마우스 이벤트를 직접 실습해보면서 위 이벤트 핸들러가 어떤 동작을 발생시키는지 확인해 보도록 합시다. 지금 당장 모든 이벤트 핸들러에 대해서 학습하는 것은 권장하지 않습니다.

다른 이벤트에 대해서 알고 싶다면 다음 사이트(https://api.jquery/com/category/events/)로 들어가 원하는 이벤트에 대해 찾아보면 좋을 것입니다.

혹은 구글에서 원하는 이벤트명과 jQuery를 함께 검색하면 원하는 결과를 찾을 수 있을 것입니다.

3.2 jQuery 플러그인, jQuery와 함께 사용되는 플러그인

jQuery UI (progressbar, selectmenu, etc)

jQuery validation (유효성 검사)

jQuery lightbox (모달 창처럼 만들어줌)

swiper(이미지 슬라이드)

sticky(위에 딱 붙여주는 UI 구현)

slick(이미지 슬라이드)

Masonry(Cascading grid layout library)

clipboard.js(복사 붙여넣기)