Index

Index

10. 이벤트

10.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 클릭했을 때 안 보이게 하기
  $(document).ready(function(){
    $("div").click(function(){
      $(this).hide();
    });
  });

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

• 클릭 이벤트 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
//버튼 클릭했을 때 변화주기
$('#btn_ani').click(function() {
  $('#box').animate({
    width: '300px',
    height: '300px',
    opacity: 1,
  }, 'slow');
});