jQuery 이벤트

모덴웹을 위한 Javascript, JQuery입문 [윤인성 지음] 참고

2017 - 11 - 06 (월)

click 이벤트

hover 이벤트

이벤트 제거

context객체

click 이벤트

on 메서드 활용한 click 이벤트

//click 이벤트
    $(document).ready(function(){
        $('h1').on('click',function(){
            $(this).html(function(index,html){
                return html +'+';
            }); //h1 태그를클릭할 경우 뒤에 '+' 가 하나씩 추가된다.
        });
      });

hover 이벤트

on 메서드 활용한 hover 이벤트

$(document).ready(function(){

    $('h1').on({
        mouseenter : function() { $(this).addClass('reverse');},   // 마우스가 hover 되었을 떄 reverse 클래스 추가
        mouseleave : function() { $(this).removeClass('reverse');}  // 마우스가 해당 문서객체에서 벗어났을떄 reverse 클래스 제거
    });

});

hover() 메서드 활용한 hover 이벤트

//hover() 를 이용하여 구현하기
    $(document).ready(function(){
        $('h3').hover(
            function(){
                $(this).addClass('reverse');
                // hover() 의 매개변수로 hover 됬을 때의 동작을 정의한 함수, 두번째로 마우스가 벗어났을 때 동작을 정의한 함수를 차례로 넣는다.
            },
            function() {
                $(this).removeClass('reverse')
            }
        );
    });

이벤트 제거

off() 메서드

$(document).ready(function(){
    $('h4').click(function(){
        $(this).html('click');
        alert('이벤트 발생');
        $(this).off(); // 클릭 이벤트가 사라짐.
    })
})

one() 메서드 : on과 동일한 방법으로 사용하지만 이벤트를 한번만 연결한다.

$(document).ready(function(){
  $('h1').one('click', function(){
    $('h1').css('color','red');
  })
})

trigger() : 이벤트를 강제로 실행한다.

<!-- $(selector).trigger(eventName)
 $(selector).trigger(eventName, data) : data 에는 배열을 집어넣는다 -->

<script>
  $(document).ready(function(){
    $('h1').click(function(){
      $(this).html(function(index, html){
        return html += '★';
      })
    })
    setInterval(function(){
      $('h1').last().trigger('click'); // click을 강제실행한다.
    },1000);
  })

</script>


<body>
  <h1>start: </h1>
  <h1>start: </h1>
</body>

context 객체

$(‘selector name’ , context)

//context 객체 $(selector , context )
$(document).ready(function(){
  $('div').click(function(){
      var header = $('h1',this).text(); // 'h1', this 매개변수를 넣어줌으로써 해당 클릭한 element의 text를 불러올 수 있다.
      var paragraph = $('p',this).text();

      alert(header +'\n'+paragraph);
  })
})