Index

Index

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');
});