참고

• [TUTORIALS] > [JQUERY] > [jQuery Tutorial] > [jQuery
  Events]
• https://www.w3schools.com/jquery/jquery_events.asp
• [TUTORIALS] > [JQUERY] > [jQuery References] > [jQuery
  Events]
• https://www.w3schools.com/jquery/jquery_ref_events.asp

이벤트

• jQuery 이벤트에는 기존 js의 이벤트가 모두 존재
• jQuery를 사용하면 기존 js의 이벤트를 연결할 때보다 훨씬 간편하게 이벤트 연결할 수 있음
• jQuery로 이벤트 연결하는 가장 기본적인 방법
  : on() 메서드 사용
• jQuery가 스스로 event 객체를 정형화하므로 jQuery의 이벤트 객체는 모든 브라우저가 같은 방법으로 사용하고 같은 속성을 가짐

$("p").on("click", function(e){	// e : event 객체
	var eventType = e.type;
})

이벤트 객체

• 모든 이벤트의 정보를 event 객체로 제공

속성

• type : 이벤트 종류 (ex. click)
• target : 이벤트가 발생한 객체(요소)
• pageX, pageY : 문서의 좌상단 기준으로 한 마우스 좌표
• screenX, screenY : 화면상 좌표
• 위 두개는 팝업 띄울 때 모니터 중간에 혹은 정해진 영역 중간에 띄우고 싶을 때 사용
• button : 눌러진 마우스 버튼
  (0 : 왼 1: 휠 2: 오른쪽버튼)
  

메서드

• preventDefault()
• stopPropagation()

마우스 이벤트

기타이벤트

on 이벤트

• 선택한 요소에 하나 이상의 이벤트를 넣을 때 사용

$("p).on({
	mouseenter : function ...
    , mouseleave : function ... 
    , click : function ... 

});

이벤트 객체 메소드

preventDefault()

• html 태그의 고유한 동작 중단
  ex) a 태그의 페이지 이동
  submit 버튼의 양식제출

$("a").click( function(event){
	event.preventDefault();
});

$("a").click( function(event){
	return false;	
    // 더 간단하긴 하지만 위 방법이 직관적
});

stopPropagation()

• 이벤트가 상위 요소에 전달되지 않게 막아줌

---

이벤트 연결 메서드

• 이벤트 : 웹페이지에서 발생하는 사용자의 동작들
• 이벤트 핸들러 Handler: 이벤트를 처리하는 것
• 이벤트 바인딩 Binding: 특정 요소에 이벤트 핸들러를 연결하는 것
  이벤트 연결 on() <-> off() 이벤트제거

$(selector).on()

• $(selector).on(event, childselector, data, function, map)
• 선택된 요소와 하위요소에 한개 이상의 이벤트 바인딩
• 현재 로드된 요소 및 스크립트로 생성될 새로운 요소에도 적용됨

// on 사용법 1 
$(document).ready(function(){
	$("p").on("mouseover mouseout", function(){
		$(this).toggleClass("intro");
	});
});


// on 사용법 2
// id test인 p 요소에 마우스를 올렸을 때, 벗어났을 때,
클릭했을 때 body 배경색이 변함

$(document).ready(function(){
$("#test").on({
	mouseover : function(){
 		$("body").css("background-color","lightblue");
 	}
	, mouseout : function(){
 		$("body").css("background-color","lightgray");
 	}
 	, click : function(){
 		$("body").css("background-color", "yellow");
 	}
  });
});

// on 사용법 3 
// 사용자정의함수 
$(document).ready(function(){
	$("p").on("myOwnEvent", function(event, name){
 		$(this).text(name + ", 멋진 이름이군!").show();
	});
});

$(selector).one()

• $(selector).one(event, data, function)
• 선택된 요소와 하위요소에 한개 이상의 이벤트를 바인딩
• 이벤트가 한번만 수행되고 제거됨

$(selector).off()

• $(selector).off(event, selector, function(eventObj).map)
• 선택된 요소에 on메소드로 연결된 이벤트 제거

$(selector).trigger()

• $(selector).trigger(event, evenObj, param1, param2...)
• 이벤트의 기본 동작 발생시킴
• 선택된 모든 요소에 동작

$(selector).triggerHandler()

• $(selector).triggerHandler(event, param1, param2...)
• 함수만 실행시키고,
• 이벤트의 기본 동작은 발생시키지 않음
• 선택된 첫 번째 요소에만 동작
• 버블링 되지 않음