jQuery_4. events

oungoo·2020년 10월 5일
0

HTML_CSS_JavaScript

목록 보기
18/21

참고

  • [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...)
  • 함수만 실행시키고,
  • 이벤트의 기본 동작은 발생시키지 않음
  • 선택된 첫 번째 요소에만 동작
  • 버블링 되지 않음

0개의 댓글