[jQuery] click(), bind(), event.preventDefault(), unbind(), keyup()

💡 핵심 요약 (TL;DR)

click(), bind(), event.preventDefault(), unbind(), keyup()의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. * 사람인 글자수계산기처럼 글자수를 역으로 카운트해서 200자 내외로 쓸 수 있는 기능을 구현해보자.

클릭이벤트 : click(), bind(), on()

• 참고링크 : click()이벤트
• bind(“이벤트종류”, 실행코드) : 해당요소에 이벤트를 등록시키는 함수
• click(function(){}) : 클릭이벤트 함수
• on(“이벤트종류”, 실행코드) : 이벤트처리함수
• 체이닝기법 : 점을 통해서 함수를 이어주는 기법이다.

<!-- 제이쿼리 라이브러리연결  -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//이벤트처리하는 방법 1안 : bind("이벤트종류", 기능)사용
		//바인드는 이벤트 여러개 연결가능
		$('input').bind("click mouseover",function(){
		 alert("제이쿼리 클릭!");
		});
		//이벤트처리하는 방법 2안 : click(기능)사용
		$('input').click(function(){
			alert("클릭함수");
		});
	
		//h2태그 클릭시 alert창 출력 -> h2태크 클릭시 해당 요소에만  '+'문자추가
 		$('h2').click(function(){
 			//this : 클릭 이벤트가 발생한 개별 h2태그
			$(this).html(function(index, text){
				//alert(text)
				return text+"+"
			})
		}); 
		
		//마우스오버시 그림변경. 마우스떼면 원래그림으로 
		//img태그보다는 this 선택자가 더 정확하다.
			$('img').mouseover(function(){
				//$('img').attr('src', '../jq/3.jpg');	
				$(this).attr('src', '../jq/3.jpg');	
			});
			$('img').mouseout(function(){
				//$('img').attr('src', '../jq/1.jpg');	
				$(this).attr('src', '../jq/1.jpg');	
			}); 

		//위의 두 동작을 한번에 처리 = >체이닝기법
			$('img').mouseover(function(){
				$(this).attr('src', '../jq/3.jpg');	
			}).mouseout(function(){
				$(this).attr('src', '../jq/1.jpg');	
			});
	});
</script>

<body>
<input type="button" value="js버튼" onclick="alert('자바스크립트 클릭')">
<img src="../jq/1.jpg">
<img src="../jq/4.jpg">
</body>

이벤트실행 방지하기 : event.preventDefault(), unbind()

• event.preventDefault() : 태그의 기본이벤트 실행을 방지하는 함수
• event.stopPropagation() :
• unbind(); : 한번만 실행하고 이벤트종료

<!-- 제이쿼리 라이브러리연결  -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){

//a 링크 클릭시 배경색을 파랑으로 변경
	  $('a').click(function(event){
		  $(this).css('background-color','blue');	 
		  //이벤트 기본기능 실행 방지
		  //event.preventDefault();// a링크 기본기능-하이퍼링크를 막음.(페이지 이동 x)
		  //event.stopPropagation();
		  
		  //return false; //모든이벤트 실행안됨
		  return true; //return; //모든이벤트 항상실행 
	  });
	  
//h2 클릭했을시 +기호 추가
	$('h2').click(function(){
		$(this).html(function(index, text){
			return text+"+"
		})
		$(this).unbind(); //이벤트 한번만 실행하고 이벤트종료
	});
})//제이쿼리닫음
</script>

<body>
<h2>이벤트실행을 막는 방법</h2>
<a href="https://www.daum.net">다음</a>
</body>

글자수카운트하기 : keyup()

• 사람인 글자수계산기처럼 글자수를 역으로 카운트해서 200자 내외로 쓸 수 있는 기능을 구현해보자.

내코드

내가 구현한 코드는 문제점이 있다

1. 글자를 지울때 글자수가 늘어나지 않는다.
   • 즉 글자의 길이를 구해야만한다. 강사님 코드를 보자.
2. 글자수를 측정하는 것이 아니라 키를 누른만큼을 측정하기때문에 한글은 자음모음으로 구성되기때문에 2카운트씩 기본으로 감소되어버린다

<!-- 제이쿼리 라이브러리연결  -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
	//textarea 글자 입력시 숫자가 1씩 감사
	
	let count =0;
	$("textarea").keyup(function(){
		count++;
		console.log(count);
		return $('#count').text(200 - count);
	});
})

</script>
</head>
<body>
<div>
   <h2><span id="count">200</span><span>자 내외로 입력하세요</span></h2><br>
   <textarea rows="5" cols="50"></textarea>
</div>
</body>

강사님 제이쿼리코드

$(document).ready(function(){
	$('textarea').keyup(function(){
		$('#count').html(200- $(this).val().length);
		
		//입력된 글자수가 200이상이면 red, 200미만이면 black 글자색상변경기능구현
		let v = 200 - $(this).val().length;
		if(v >= 0){
			$('#count').css('color', 'black');
		}else{
			$('#count').css('color', 'red');
		}
	});
});

#ITWILL(JAVA)jQuery