jQuery event (this,on,off)

jQuery Event Handle

$(selector).click(callback) : 선택자로 검색된 태그에서 클릭 이벤트가 발생되면 콜백함수
(이벤트 처리 함수)를 호출하는 메소드 - 이벤트 처리 함수를 등록하는 메소드
> 단축형 : 검색 태그에서 발생되는 하나의 이벤트에 대한 이벤트 처리 함수 등록

	$("#btn").click(function() {
		$("#displayDiv").text("이벤트 처리 명령 실행");
	});

$(selector).on(event,callback) : 선택자로 검색된 태그에서 클릭 이벤트가 발생되면 콜백
함수(이벤트 처리 함수)를 호출하는 메소드 - 이벤트 처리 함수를 등록하는 메소드
> 일반형 : 검색 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수 등록

	$("#btn").on("click",function() {
		$("#displayDiv").text("이벤트 처리 명령 실행");
	});

태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수를 등록하기 위해 on 메소드의
매개변수에 JSON 형식의 Object 객체의 요소로 전달하여 등록

$("#btn").on({
		"click":function() {
			$("#displayDiv").text("이벤트 처리 명령 실행");
		}	
	});

this

이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체) 표현

	$("ul li").click(function() {
		var choice=$(this).text();//선택한 태그의 태그내용을 반환받아 변수에 저장
		$("#menu").text(choice);//태그의 태그내용 변경
	});

mouseover,mouseout

$("div").click(function() {
$(this).css("color","red");
	});
//$(selector).mouseover(callback) : 선택자로 검색된 태그에 마우스 커서가 진입한 경우
//콜백함수를 호출하는 메소드
$("div").mouseover(function() {
$(this).css("background","yellow");
	});
//$(selector).mouseout(callback) : 선택자로 검색된 태그에 마우스 커서가 벗어날 경우
//콜백함수를 호출하는 메소드
$("div").mouseout(function() {
//css 메소드로 다수의 CSS 스타일을 변경할 경우 Object 객체로 표현하여 전달 가능 
$(this).css({"color":"black","background":"white"});
	});

on

선택자로 검색된 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수는 on 메소드를호출하여 등록하는 것을 권장
다수의 이벤트에 대한 이벤트 처리 함수를 Object 객체의 요소로 표현하여 전달

$("div").on({
"click":function() {
$(this).css("color","red");
	},
"mouseover":function() {
$(this).css("background","yellow");
	},
"mouseout":function() {
$(this).css({"color":"black","background":"white"});
	}
	});

off

$("#btn").off("click") : 선택자로 검색된 태그의 이벤트를 제거하는 메소드
> 태그의 이벤트에 대한 이벤트 처리 함수 등록 제거

$("#eventOff").click(function() {
		//$("#btn").off("click") : 선택자로 검색된 태그의 이벤트를 제거하는 메소드 
		// > 태그의 이벤트에 대한 이벤트 처리 함수 등록 제거 
		$("#btn"/*발생한이벤트*/).off("click");
		$("#displayDiv").text("이벤트 처리 함수 제거 성공");
	})

false

이벤트 처리 함수에서 [false]를 반환하면 태그의 기본 이벤트를 제거하고 이벤트 전달 중지

	$("div").find("a").click(function() {
		$(this).css("background","yellow");
		/*
		event.preventDefault();//태그의 기본 이벤트 제거	(a태그의 기본 이벤트 제거)
		event.stopPropagation();//태그의 이벤트 전달 중지  (버블링 중지 : 부모가 실행될 수 있으니 필요함.)
		*/
		//이벤트 처리 함수에서 [false]를 반환하면 태그의 기본 이벤트를 제거하고 이벤트 전달 중지
		return false;
	});