이벤트 등록 메서드_jQuery

이벤트 등록 메서드

- 이벤트 관련 메서드는 이벤트 명칭으로 메서드가 구성되어 있다.

- 이벤트 종류 : click, blur, change, keyup, keydown, keypress

- 이벤트 등록은 이벤트 메서드를 활용하거나, on 메서드를 활용하여 이벤트를 등록 시킬 수 있다.

- 이벤트 등록 해제 메서드는 off 메서드이다.

 

이벤트 관련 메서드 사용하여 이벤트 등록 ( 바인딩 )

<input type="text" id="searchInput">
<script type="text/javascript">
	//선택자.이벤트 메서드(function(){});
	$('#searchInput').keyup(function(){
		//선택된 대상의 value 속성값을 가지고 오거나 변경 시키는 메서드는 val();
		console.log($(this).val());
	});
</script>

 

on 메서드를 활용하여 이벤트 등록

<select id="mySelectr">
	<option value="">::선택::</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<script type="text/javascript">
//$('선택자').on('이벤트명',function(){});
$('#mySelectr').on('change',function(){
	console.log($(this).val());
});
</script>

 

off 메서드로 등록 된 이벤트 제거하기

- off( ) -> 선택된 객체의 전체 이벤트 제거

- off('이벤트명') -> 선택된 객체에 인수에 삽입도니 이벤트만 제거

<button type="button" id="myBtn">클릭</button>
<script type="text/javascript">
	var myBtn =$('#myBtn');
	myBtn.on('click',function(){
		console.log('클릭1');
	});
	myBtn.off('click');
	myBtn.on('click',function(){
		console.log('클릭2');
	});
</script>

 

이벤트트리거

- 등록된 이벤트행위를 행하는 것

- trigger('이벤트 명'); -> 인수에 해당되는 행위 실행

<button type="button" id="btn01">클릭01</button>
<button type="button" id="btn02">클릭02(btn01트리거)</button>
<script type="text/javascript">
	$(function(){
		$('#btn01').click(function(){
			console.log('btn01 클릭');	
		});
		$('#btn02').click(function(){
			//btn02 버튼 클릭 시 btn01 클릭 행위 실행
			//이벤트 메서드에 인수인 함수가 없을 경우 트리거 발생
			$('#btn01').click();
			$('#btn01').trigger('click');
		});
	});
</script>