티스토리 뷰

Javascript, jQuery

(jQuery) 제이쿼리 이벤트 처리 간단히 알아보기 (2)

가독성 0% 2017. 9. 13. 00:04
반응형

이벤트 종류에대한 정보는 http://api.jquery.com/category/events/ 에서 확인가능합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3 id="title1">[bind()함수] 클릭해보세요.</h3>
	<h3 id="title2">[bind()함수] 클릭해보세요.</h3>
	<h3 id="title3">[one()함수] 클릭해보세요.</h3>

	<form id="comment_form">
		<input type="text" id="comment" /> <input type="submit" value="덧글" />
	</form>
	<ul id="comment_list">
	</ul>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		/*
		bind()함수를 이용해 여러 이벤트를 공통된 함수에 연결하는 방법
		$("#sp").bind("이벤트1 이벤트2 ...", function() {
			처리~
		});
		*/
		$("#title1").bind("mousedown mouseup", function() {
			this.append(" [클릭]"); //append는 내용을 추가
		});
	
		//각자 이벤트를 처리하고 하나로 묶는방법
		$("#title2").bind({
			"mousedown" : function() {
				this.append(" [눌러짐]");
			},
			"mouseup" : function() {
				this.append(" [떼어짐]");
			}
		});
	
		/*
		one()함수는 bind()함수와 사용법은 똑같습니다.
		one()함수는 이벤트가 여러번 실행되지않고 한 번만 실행이 필요할 경우 사용
		각자 이벤트 처리를 하는방법도 똑같습니다.
		*/
		$("#title3").one("mousedown mouseup", function() {
			this.append(" [클릭]"); //append는 내용을 추가
		});
	
		/*
		동적으로 추가되는 요소들은 반복적으로 생성되면서
		이벤트함수 또한 반복적으로 생성되어 
		메모리를 낭비하는 경우를 방지하기위해 on()함수를 이용합니다.
		on()함수를 이용하여 미리 이벤트를 정의해놓고
		하나의 이벤트에 자동으로 연결을 시킵니다.
		
		$(document).on("이벤트 종류","셀렉터", function(){});
		*/
		$(document).on("click", "#delete_btn", function() {
			$(this).parents("#comment_item").remove();
		});
		
		$("#comment_form").submit(function() {
			if (!$("#comment").val()) {
				alert("내용을 입력하세요.");
				$("#comment").focus();
				return false;
			}
			//ul태그에 추가될 li, span, btn 태그객체
			//attr을 이용하여 id값의 이름을 설정할수 있습니다.
			var li = $("<li>").attr("id", "comment_item");
			var span = $("<span>").attr("id", "comment_span").html($("#comment").val());
			var btn = $("<input>").attr({
				"id":"delete_btn",
				"type" : "button",
				"value" : "삭제"
			});
			
			//li태그안에 들어갈 내용들을 조합합니다.
			li.append(span).append(btn);
			//조합된 내용을ul태그에 추가합니다.
			$("#comment_list").append(li);
			//텍스트박스 초기화
			$("#comment").val("");
			return false;
		});
	</script>
</body>
</html>




반응형
저작자표시 비영리 변경금지

'Javascript, jQuery' 카테고리의 다른 글

(jQuery) 제이쿼리 Ajax 함수 사용방법 간단히 알아보기  (0) 2017.09.14
(jQuery) 제이쿼리 이벤트 처리 간단히 알아보기  (0) 2017.09.11
(jQuery) 제이쿼리 기초 및 class,id,name으로 제어하기  (0) 2017.09.10
(javascript) 자바스크립트 Json 형식 간단히 알아보기  (0) 2017.09.07
(Javascript) 자바스크립트에서 form 입력양식 제어하기  (0) 2017.09.06
공유하기 링크
댓글
최근에 올라온 글
최근에 달린 댓글