제이쿼리 - 기초(3) / 이벤트

$(function(){
	$(".btn1").click(function(){
		// .btn1에 click 이벤트 등록
		alert("호호");
	});
	
	$(".btn2").on("click",function(){
		// .btn2에 click 이벤트 등록
		alert("호호2");
	});
	
	$(".btn4").click(function(){
		$(".btn3").click(function(){
			
			alert("호호3");
		});
		
		$(".btn3").text("클릭 가능");
		
	});
	
	$(".btn5").click(function(){
		$(".btn3").off("click");
		$(".btn3").text("클릭 불가");
	});
	
	
});


/*
-- 이벤트의 연결(event binding)
  $("selector").click(function(event) { // 실행하고자 하는 jQuery 코드 });
  $("selector").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 });
  $("selector").on("click", function(event) { // 실행하고자 하는 jQuery 코드 });
  $("body").on({"click": function(event) { // 실행하고자 하는 jQuery 코드 }}, "selector");
  $("body").on("click", "selector", function(event) { // 실행하고자 하는 jQuery 코드 });

  jQuery 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인
  
-- .on() 메소드
  선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.
  하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.
  선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있다.
  사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.
  차후에 다루게 될 요소를 이벤트에 바인딩할 수 있다.
  
-- .off() 메소드
  더 이상 사용하지 않는 이벤트와의 바인딩(binding)을 제거한다.

-- 이벤트 핸들러 함수 내부의 $(this)
    이벤트를 발생시킨 객체
*/

on() 메소드를 이용해서 이벤트를 등록이 가능하다.

1.7부터는 click()를 써도 내부적으로 on() 메소드를 이용함

 

$(function() {
	

	var n = 0;
	$(".btn1").click(function() {
		var s = "<p>추가 - " + (++n) + "</p>";
		$(".box").append(s);
	});
	
	// 실행과 동시에 click 이벤트 발생
	$(".btn1").trigger("click");
	
	// 이벤트가 한번만 실행
	$(".btn2").one("click", function(){
		alert("클릭이 한번만 가능하다.");
	});
	
	
});

/*
-- 이벤트
  .one( events [, data], handler(eventObject) )
    요소에 대한 이벤트에 핸들러를 연결한다. 핸들러는 이벤트 유형별로 요소 당 최대 한 번 실행된다.
  .trigger( eventType [, extraParameters] )
    특정 이벤트 유형에 대해 선택된 요소에 연결된 모든 핸들러와 동작(behavior)을 실행한다.
*/

one() 메소드는 말 그대로 딱 한번 사용 가능하게 만들어 준다.

trigger() 메소드는 로드가 되면 한번 이벤트가 실행된다.

내가 실행 안해도 페이지가 로드 되면 한번 실행하는 것

 

$(function(){
	$("#linkList1 a").on("click", function(){
		event.preventDefault();
		alert("이 링크는 동작하지 않습니다.")
	});
	
	$(".btn1").one("click", function(){
		$("#linkList1").append("<li><a href='//www.naver.com'>네이버</li>");
	});
	
	$(".btn2").one("click", function(){
		// 네이버도 링크 적용 안되게
		$("#linkList2").append("<li><a href='//www.naver.com'>네이버</li>");
	});
	
	$("#linkList2").on("click", "a", function(){
		event.preventDefault();
		alert("이 링크는 동작하지 않습니다.")
	});
	
	
	
});


/*
-- 이벤트 핸들러 함수 내부의 $(this)
  이벤트에 바인딩된 요소
  
-- 이벤트 중지
   - Event.preventDefault() : 프리벤트디폴트함수는 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 그 이벤트를 취소한다.
   - Event.stopPropagation() : 현재 이벤트가 상위로 전파되지 않도록 중단한다. 즉, 캡처 및 버블 링 단계에서 현재 이벤트가 더 이상 전파되지 않도록 한다.
   - Event.stopImmediatePropagation() : 상위 뿐 아니라 같은 레벨로도 이벤트가 전파되지 않도록 중단한다.
   - return false; : jquery 에서는 event.preventDefault()와 event.stopPropagation()를 모두 수행한것과 같다.
*/

 

이벤트를 취소, 삭제, 중지 시키는 방법이다.

event.preventDefault(); 를 통해서 이벤트를 아예 지울 수 있다.

 

$(function() {
	/*
	$("div.item").click(function() {
		alert("클릭");
	});
	*/
	
	// click과 dbclick이 동시에 바인딩 되면 click만 처리 됨
	$("div.item").dblclick(function() {
		alert("더블 클릭");
	});
	
	$("div.item").contextmenu(function() {
		alert("우측 버튼");
	});
	
	$("#wrap1").mouseover(function() {
		$("#wrap1 p").css("background", "#a1ffa4");
	});
	
	$("#wrap1").mouseout(function() {
		$("#wrap1 p").css("border", "3px solid red");
	});
	
	$("#wrap2").mouseenter(function() {
		$("#wrap2 p").css("background", "#a1ffa4");
	});
	
	$("#wrap2").mouseleave(function() {
		$("#wrap2 p").css("border", "3px solid red");
	});
	
	
});



/*
-- 마우스 관련 이벤트
  .click() : 자바스크립트의 "click" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "click" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
  .contextmenu() : 마우스 우측 버튼을 누르면 실행. 이벤트 핸들러를 javascript의 "contextmenu" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
  .dblclick() : 마우스를 더블클릭하면 실행. 이벤트 핸들러를 javascript의 "dblclick" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
  .hover() : 하나 또는 두 개의 핸들러를 일치하는 요소에 바인딩하여 마우스 포인터가 요소에 들어오고 나갈 때 실행되도록 한다.
  .mousedown() : 이벤트 핸들러를 javascript의 "mousedown" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
  .mouseenter() : 마우스가 요소에 들어갈 때 발생하는 이벤트 핸들러를 바인딩하거나 요소에서 해당 핸들러를 트리거.
      마우스 포인터가 해당 영역 안으로 이동하면 실행. 지정된 요소만 적용되며 자식 요소는 적용되지 않음
  .mouseleave() : 마우스가 요소를 떠날 때 시작될 이벤트 핸들러를 바인딩하거나 요소에서 해당 핸들러를 트리거
      마우스 포인터가 해당 영역 밖으로 이동하면 실행. 지정된 요소만 적용되며 자식 요소는 적용되지 않음
  .mousemove() : 이벤트 핸들러를 javascript의 "mousemove" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
      마우스를 움직이면 실행
  .mouseout() : 이벤트 핸들러를 javascript의 "mouseout" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
      마우스 포인터가 해당 영역 밖으로 이동하면 실행. 지정된 요소 및 자식 요소에도 적용
  .mouseover() : 이벤트 핸들러를 javascript의 "mouseover" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
      마우스 포인터가 해당 영역 안으로 이동하면 실행. 지정된 요소 및 자식 요소에도 적용
  .mouseup() : 이벤트 핸들러를 javascript의 "mouseup" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
      마우스 버튼을 뗄때 실행.
*/

마우스 이벤트에서 mouseover와 mouseout은 자식까지 건들기 때문에 되도록 쓰지말고

mouseenter과 mouseleave를 사용하자

기능은 같으나 문제가 없다.

 

$(function(){ // 호버는 2가지 인수를 가짐 마우스 들어갈때, 나갈때
	
	$("table.tc tr:gt(0)").hover(
		function(){$(this).addClass("hover"); },
		function(){$(this).removeClass("hover"); }
	);
	
	$(".btnUpdate").click(function(){
		alert( $(this).attr("data-hak")+"수정" );
	});
	
	$(".btnDelete").click(function(){
		alert( $(this).attr("data-hak")+"삭제" );
	});
});

마우스 올렸을때의 이벤트와 마우스 올린걸 내렸을때의 이벤트는 hover로도 가능하다.

 

$(function(){
	// 엔터를 입력하면 다음으로 포커스 이동
	$("input").not(":button").keypress(function(evt){
		if(evt.keyCode == 13) { // 엔터는 13
			var fields = $(this).parents("form, body").find("button, input, textarea, select");
			var index = fields.index(this);
			if(index > -1 && (index + 1) < fields.length ) {
				fields.eq(index + 1).focus();
			}
			return false;
		}
	});
});

$(function(){
	$(".inputs").keyup(function(){
		var limit = $(this).attr("maxlength");
		if(! limit) return;
		
		if(this.value.length >= limit) {
			$(this).closest("tr").next().find(".inputs").focus();
			return false;
		}
	});
});

/*
-- 키보드 관련 이벤트
  .keydown() : 이벤트 핸들러를 javascript의 "keydown" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
  .keypress() : 이벤트 핸들러를 javascript의 "keypress" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
  .keyup() : 이벤트 핸들러를 javascript의 "keyup" 이벤트에 바인딩 하거나 요소에서 해당 핸들러를 트리거.
 */

키보드 이벤트도 있다.

 

$(function(){
	$("form input+span").hide();
	$("form input[type=text]").css("border", "1px solid #aaa");
	
	/*
	// input을 클릭해도 부모인 td에서 이벤트 감지 (버블링)
	$("td").focusin(function(){
		$(this).find("span").css("display", "inline").fadeOut(2000);
	});
	*/
	
	// 그냥 포커스로하면 반응 없음
	$("td").focus(function(){
		$(this).find("span").css("display", "inline").fadeOut(2000);
	});
	
	$("form input").not($(":button")).focus(function(){
		$(this).css("border", "1px solid #f28011");
		$(this).next("span").show();
	});
	
	$("form input").not($(":button")).blur(function(){
		$(this).css("border", "1px solid #aaa");
		$(this).next("span").hide();
	});
	
});

$(function(){
	$("form[name=scoreForm]").submit(function(){
		alert("등록하기 버튼을 클릭");
		
		return false; // return false는 서버로 전송 안됨.
	});
});

submit() 메소드로 submit 기능을 사용 할 수 있다.

 

focus와 blur 이벤트는 말 그대로 활성화 되었을때 아닐때의 이벤트를 설정한다.

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".form .img-viewer").click(function(){
		$("form[name=photoForm] input[name=selectFile]").trigger("click");
	});
	
	$("form[name=photoForm] input[name=selectFile]").change(function(){
		var img;
		var file = this.files[0];
		if(! file) {
			img = "add_photo.png";
			$(".form .img-viewer").css("background-image", "url("+img+")");
			return false;
		}
		
		var reader = new FileReader();
		reader.onload = function(e) {
			$(".form .img-viewer").css("background-image", "url("+e.target.result+")");
		}
		reader.readAsDataURL(file);
	});
	
});

</script>

</head>
<body>

<h3>Event</h3>

<div class="container">
	<form name="photoForm">
		<div class="form">
			<div class="img-viewer"></div>
			<input type="file" name="selectFile" accept="image/*" class="boxTF">
		</div>
	</form>
</div>

이미지 파일에 파일 추가 기능을 줄 수 있게 한다.