공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

버튼핸들러

serpiko 2014. 1. 6. 15:25

코드) 제이쿼리로 버튼핸들러를 쓸때에 클릭한 버튼의 id나 class의 index를 가지고 제어할 경우 썼던 방법.

<html>
<head>
	<meta charset="utf-8" />
	<title> serpiko's btn handler </title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head>

<body>

	<input type="button" value="button0" class="main0" />
	<input type="button" value="button1" class="main1" />
	<input type="button" value="button2" class="main2" />
	<input type="button" value="button3" class="main3" />
	<p id="text">버튼클릭</p>

	<script>
	$(document).ready(function(){
		for(var i=0; i<4; ++i){

			var btn = $(".main" + i);
			btn.attr("num",i); // btn.attr({"num":i});

			btn.click(function(e){
				var index = $(e.currentTarget).attr("num"); //e.target
				$('body p').text("누른버튼은 : " + index);
			});
		}
	});
	</script>
</body>
</html>


21 : attr에 속성을 개별로 부여할 수 있고, 오브젝트 형식으로 속성을 다중부여 할 수 있다.


24 : 자바나 as3.0과 마찬가지로 event객체의 target은 클릭한 지점에서 이벤트가 전달 되고, 

     

      currentTarget은 리스너에 등록된 객체에서 전달된다.



결과)


저작자표시 비영리 동일조건 (새창열림)

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

01.드래그 - 기초  (0) 2014.03.10
제이쿼리 변수와 셀럭터의 조합  (0) 2014.01.15
length - Element 갯수 반환  (0) 2014.01.06
on() - selectstart, dragstart 로 마우스 드래그방지  (2) 2014.01.06
자바스크립트 롤링배너  (0) 2013.11.27
댓글