[jQuery] jQuery 이벤트

이벤트 연결

• on() 메서드 : 이벤트 연결

$(selector).on(eventname, function(){})

첫 번째 매개변수에 이벤트 이름을 입려하고 두 번째 매개변수에 이벤트 리스너를 입력, 이벤트 리스터 안에서 this 키워드는 이벤트가 발생한 객체를 의미

<script>
  $(function(){
	//이벤트 연결
  $('h1').on('click', function(){
  	$(this).html(function (index, html){
    	return html + '+';
    });
  });
});
</script>

$(selector).on(object)

on() 메서드의 매개변수에 객체를 넣어준다. 속성 이름과 속성 값에 이벤트 이름과 이벤트 리스너를 넣으면 이벤트를 쉽게 연결할 수 있다.

<script>
$(function(){
//이벤트 연결
  $('h1').on('click', function(){
  	$(this).html(function (index, html){
    	return html + '+';
    });
  });
  //이벤트 연결
  $('h1').on({
  	mouseenter: function () { $(this).addClass('reverse') },
    mouseleave: function () { $(this).removeClass('reverse') }
  });
});  
</script>

<style>
  .reverse{
  	background:black;
    color:white;
  }
</style>

blur	focus	focusin	focusout	load
resize	scroll	unload	click	dbclick
mousedown	mouseup	mousemove	mouseover	mouseout
mouseenter	mouseleave	change	select	submit
keydown	keypress	keyup	error	ready

• 간단한 이벤트 연결

$(selector).method(function(event){ );

이벤트 연결 제거

• off() 메서드 : 이벤트 제거

$(selector).off()

해당 문서 객체와 관련된 모든 이벤트 제거

$(selector).off(eventname)

해당 문서 객체의 특정 이벤트와 관련된 모든 이벤트 제거

$(selector).off()
$(selector).off(eventname)
$(selector).off(eventname, function)

특정 이벤트 리스너 제거

<script>
  $(function(){
	//이벤트 연결
  	$('h1').click(function(){
    	//출력
      $(this).html('click');
      alert('이벤트 발생');
      
      //이벤트 제거
      $(this).off();
    });
});
</script>

이벤트 한번씩 만 실행

• one() 메서드 : 이벤트를 한 번만 연결 한다.

  매개변수 context

jquery 메서드는 매개변수를 두 개 입력할 수 있다. selector 매개변수 이외에 context 매개변수도 넣을수 있다.

$(selector, context)

매개변수 context는 selector가 적용하는 범위를 한정한다. 일반적으로 이벤트와 함께 사용한다. 특정 부분에 선택자를 적용하고 싶을 때 사용하는 것이 매개변수 context이다.

 <style>
   *{margin:0px; padding:0px;}
  div{
    margin:5px; padding: 3px;
    border:3px solid black;
    border-radius: 10px;
  }
</style>
<div>
    <h1>Header 1</h1>
 	<p>Paragraph</p>
</div>
<div>
    <h1>Header 2</h1>
	<p>Paragraph</p>
</div>
<div>
    <h1>Header 3</h1>
    <p>Paragraph</p>
</div>

<script>
    $(function(){
       $('div').click(function(){
           var header = $('h1',this).text();
           var paragraph = $('p',this).text();
           
           alert(header + '\n' + paragraph);
       });
    });
</script>

click 이벤트가 발생한 문서 객체 안에서 h1 태그와 p태그를 선택하고 싶을 떄는 위 코드 처럼 this 키워드를 $() 메서드의 두 번째 매개변수로 넣어준다. 범위를 이벤트 발생 객체로 한정하므로 쉽게 이벤트 발생 객체 안에만 선택자를 적용할 수 있다.

이벤트 객체

• event.pageX : 브라우저의 화면을 기준으로 한 마우스의 X 좌표 위치
• event.pageY : 브라우저의 화면을 기준으로 한 마우스의 Y 좌표 위치
• event.preventDefault() : 기본 이벤트를 제거한다.
• event.stopPropagation : 이벤트 전달을 제거한다.