jQuery 8강 - 다양한 이벤트 동작을 알아보도록 하자

오랫만에 jQuery 포스팅을 하게 되었습니다.

오늘 작성해볼 포스팅은 jQuery 이벤트들에 대하여 알아볼까 하는대요.

그중 몇가지만 설명과 예를들어 포스팅 해보도록 하겠습니다.

모든 이벤트의 테스트를 간단하게 적용하기 위하여 이벤트 발생시 alert 을 화면에 출력시켜보도록 하겠습니다.

1. click 이벤트

보통 button 및 a태그에 자주 적용되는 이벤트인대요. 

꼭 버튼이나 a태그 말고도 그외의 태그에도 적용이 가능합니다.

한번 버튼 태그에 클릭이벤트를 적용해보는 코드를 작성해보겠습니다.

jQuery CDN을 이용하여 예를 드는 것이니 별도로 jQuery 버전에 대해서는 본인이 사용중인 버전을 이용하셔도 무관합니다.

2014/10/08 - [웹개발강좌/jQuery] - jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기

HTML button 태그 생성

<input type="button" id="btn" value="클릭"/>

click 이벤트 스크립트코드

$(function(){
	$("#btn").click(function(){
		//클릭이벤트 발생시 진행할 스크립트 작성
		alert("클릭입니다!!");
	})
})

2. double click 이벤트

클릭이벤트는 특정 타겟에 클릭이 한번 이루어졌을 경우 발생되는 이벤트일때 사용이 됩니다.

더 나아가 특정 태그에 연속으로 두번클릭이 이루어졌을 경우 더블클릭 이벤트를 실행시킵니다.

자주 사용되지는 않지만 알아보도록 해보겠습니다.

HTML button 태그 생성

<input type="button" id="dblbtn" value="더블클릭"/>

dblclick 이벤트 스크립트코드

$(function(){
	$("#dblbtn").dblclick(function(){
		//더블클릭이벤트 발생시 진행할 스크립트 작성
		alert("더블클릭입니다!!");
	})
})

3. change 이벤트

change이벤트는 보통 select 박스의 값이 변경되었을 경우 발생되는 이벤트입니다.

한번 selectbox 를 변경해보면서 선택값을 출력해보는 예제코드를 작성해봅니다.

HTML select 태그 생성

<select id="slct">
	<option value="1">첫번째</option>
	<option value="2">두번째</option>
</select>

change 이벤트 스크립트 코드

$("#slct").change(function(){
	//셀렉트박스 발생시 진행할 스크립트 작성
	//선택된 값을 alert으로 출력해보는 샘플코드
	var selectvalue = $("#slct").val();
	alert("변경이되었습니다.(선택된값은:"+selectvalue+")입니다.");
})

4. keypress/keydown 이벤트

일반적으로 input 박스에서 키보드의 키가 눌리는 현상이 나타날때 발생되는 이벤트입니다.

상황에 따라 사용을 해주셔야 할거 같습니다.

※ keypress 및 keydown은 키보드가 눌리는 즉시 발생되므로 console.log가 지원이 되는 브라우저 환경에서 진행 하시기를 권유합니다.

    만약 console.log 이벤트가 지원되지 않는 브라우저진행 시 alert으로 변경해서 테스트 하시길 바랍니다.

HTML input 태그 생성

<input type="text" id="key2"/>

keyup 이벤트 스크립트 코드

$("#key2").keypress(function(){
      //input 키보드 눌리는 이벤트 발생시 진행할 스크립트 작성
      console.log("키보드누름 이벤트 발생중...");
})

5. keyup 이벤트

일반적으로 input 박스에서 키보드의 키가 눌렀다가 떼었을때 발생되는 이벤트입니다.

HTML input 태그 생성

<input type="text" id="key"/>

keyup 이벤트 스크립트 코드

$("#key").keyup(function(){
        //input 키보드 눌렀다 떼어지는 이벤트 발생시 진행할 스크립트 작성
	alert("눌렀다가 떼었다");
})

6. hover 이벤트

마우스 이벤트의 한 종류로 토글과 비슷한 기능을 가지는 이벤트입니다.

마우스 포인터가 특정 타겟에 위치했을 경우/ 벗어났을 경우에 대한 이벤트를 가집니다.

다음예제는 div 태그에 마우스포인터를 가져갔을 경우 특정 class를 적용하여 div 레이어의 배경색이 파란색으로 변경되며 

글자색은 흰색으로 변경되는 class를 적용하고 벗어날경우 해당 class를 제외하는 기능입니다.

HTML div 태그 생성

<div id="mousehover">
	마우스를 올리면 영역의 색깔이 변합니다.
</div>

hover 이벤트 스크립트 코드

$("#mousehover").hover(
	//타겟에 마우스포커스가 잡혔을 경우
	function(){
               //div class 속성에 hover_class라는 클래스를 추가
		$("#mousehover").attr("class","hover_class");	
	}
	//타겟에 마우스포커스가 벗어났을 경우
	,function(){
               //div class 속성에 hover_class라는 클래스를 제거
		$("#mousehover").attr("class","");
	})
})

mouse over 이벤트 발생시 추가하고자 하는 style 클래스 코드

.hover_class {
	background-color: blue;
	color: white;
}

7. focus 이벤트

포커스 이벤트는 특정 태그에 초점을 주기위한 이벤트로 주로 validation 체크시 종종 사용되는 이벤트입니다.

다음 코드를 보시면 쉽게 이해가 되실겁니다.

HTML text/button 태그 생성

<input type="text" id="focusTxt" />
<input type="button" id="focusBtn" value="text포커스이동" />

click 이벤트 발생 후 focus 이벤트 스크립트 코드

$("#focusBtn").click(function(){
	$("#focusTxt").focus();
})
})

지금까지 주로 사용하는 이벤트들에 대해서 작성해보았습니다.

조금 더 상세하고  많은 이벤트가 궁금하시면 하단 Document URL 을 이동하여 확인 해주시기 바랍니다.

http://api.jquery.com/category/events/

지금까지 작성한 코드를 일괄로 작성한 코드는 다음과 같습니다.

HTML코드

<input type="button" id="btn" value="클릭"/>
<br/>
<input type="button" id="dblbtn" value="더블클릭"/>
<br/>
<select id="slct">
	<option value="1">첫번째</option>
	<option value="2">두번째</option>
</select>
<br/>
<input type="text" id="key"/>
<br/>
<input type="text" id="key2"/>
<br/>
<div id="mousehover">
	마우스를 올리면 영역의 색깔이 변합니다.
</div>
<br/>
<input type="text" id="focusTxt" />
<input type="button" id="focusBtn" value="text포커스이동" />

자바스크립트코드

$(function(){
	$("#btn").click(function(){
		//클릭이벤트 발생시 진행할 스크립트 작성
		alert("클릭입니다!!");
	})
	$("#dblbtn").dblclick(function(){
		//더블클릭이벤트 발생시 진행할 스크립트 작성
		alert("더블클릭입니다!!");
	})
	$("#slct").change(function(){
		//셀렉트박스 발생시 진행할 스크립트 작성
		//선택된 값을 alert으로 출력해보는 샘플코드
		var selectvalue = $("#slct").val();
		alert("변경이되었습니다.(선택된값은:"+selectvalue+")입니다.");
	})
	$("#key2").keypress(function(){
		//input 키보드 눌리는 이벤트 발생시 진행할 스크립트 작성
	    console.log("키보드누름 이벤트 발생중...");
	})
	$("#key").keyup(function(){
		//input 키보드 눌렀다 떼어지는 이벤트 발생시 진행할 스크립트 작성
		alert("눌렀다가 떼었다");
	})
	$("#mousehover").hover(
	//타겟에 마우스포커스가 잡혔을 경우
	function(){
		$("#mousehover").attr("class","hover_class");	
	}
	//타겟에 마우스포커스가 벗어났을 경우
	,function(){
		$("#mousehover").attr("class","");
	})
	$("#focusBtn").click(function(){
		$("#focusTxt").focus();
	})
})

css코드

.hover_class {
	background-color: blue;
	color: white;
}

지금까지 자주 사용되는 jQuery 이벤트에 대하여 알아보았습니다.

다음장은 레이어를 화면에 보여주고 숨겨주는 몇가지 기능에 대하여 알아보도록 하겠습니다.

by 개발로짜