jquery - 이벤트(event)등록 메서드

기본형

※그룹 이벤트 등록 시에 on() 메서드를 사용함

<button id="btn">버튼</button>
---------------------------------------------


          // 단독 이벤트

$("#btn").click(function(){
	자바스크립트 코드;
});


// $("#btn") 이벤트 대상
// click 이벤트 종류
// (function(){ 자바스크립트 코드; }); 이벤트 핸들러


=============================================

          // 그룹 이벤트

// on()메서드 등록 방식 1

$("#btn").on("mouseover focus", function() {
    	console.log("welcome");
});

---------------------------------------------

// on()메서드 등록 방식 2

$("#btn").on({
	"mouseover focus" : function() {
    	console.log("welcome");
    }
});

---------------------------------------------

// on()메서드 등록 방식 3

$("#btn").on({
	"mouseover" : function() {
    	console.log("welcome");
    },
    "focus" : function() {
    	console.log("welcome");
    }
});

 

*단독 이벤트 등록 메서드 / 그룹 이벤트 등록 메서드

 

$(function(){

    $(".btn1").click(function(){
        $(".btn1").parent().next().css({"color":"red"});
    });      // 단독 이벤트 등록
    
// -------------------------------------------------------------

    $(".btn2").on({
        "mouseover focus":function() {
            $(".btn2").parent().next().css({"color":"green"});
        },
        "mouseout blur":function() {
            $(".btn2").parent().next().css({"color":"blue"});
        }    // 그룹 이벤트 등록
    });
// -------------------------------------------------------------
});




설명
위쪽 click이 들어간 단독 메서드는 클릭하면 이벤트 발생

아래쪽 on()이 들어간 그룹 메서드는 마우스를 버튼에 올리면 녹색으로 변하고,
마우스를 버튼에서 빠지면 파란색으로 변함.

 

 

 

*강제로 이벤트 발생시키기 - trigger() 사용

$(function(){
    $(".btn1").click(function(){
        $(".btn1").parent().next().css({"color":"red"});
    }); // 단독 이벤트 등록
    
    $(".btn2").on({
        "mouseover focus":function() {
            $(".btn2").parent().next().css({"color":"green"});
        },
        "mouseout blur":function() {
            $(".btn2").parent().next().css({"color":"blue"});
        } // 그룹 이벤트 등록
    });
   
   
   // 강제 이벤트 발생 시키는 메서드
    $(".btn1").click();
    $(".btn2").trigger("mouseover");
});

 

 

*이벤트 제거 메서드 - off() 사용

$(function(){
    $(".btn1").click(function(){
        $(".btn1").parent().next().css({"color":"red"});
    }); // 단독 이벤트 등록
    
    $(".btn2").on({
        "mouseover focus":function() {
            $(".btn2").parent().next().css({"color":"green"});
        },
        "mouseout blur":function() {
            $(".btn2").parent().next().css({"color":"blue"});
        } // 그룹 이벤트 등록
    });
    
    // 이벤트 제거 메서드
    $(".btn1").off("click");
    $(".btn2").off("mouseout blur");
});


결과
이벤트가 제거되어 발생되지 않음.

 

 

*로딩 이벤트 메서드

- ready() / load() 이벤트 메서드

• ready()는 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체의 로딩이 끝나면 이벤트 발생.
• load()는 외부에 연동된 소스(iframe, img, video)의 로딩이 끝나면 이벤트 발생.

 

*기본형

$(document).ready(function() { 자바스크립트 코드; });
$(document).on("ready", function() { 자바스크립트 코드; });
$(window).load(function() { 자바스크립트 코드; });
$(window).on("load", function() { 자바스크립트 코드; });

 

*예제

<p>
	<img src="http://place-hold.it/300X300" class="img1">
</p>
----------------------------------------------------------

$(function() {
	$(document).ready(function() {
    	var h1 = $(".img1").height();
        console.log("ready:", h1);    // ready : 0 
    });
    
    $(window).load(function() {
    	var h2 = $(".img1").height();
        console.log("load:", h2);     // ready : 300
    });
});



설명
처음의 ready()는  HTML에 전체 요소가 로딩되면 이벤트 핸들러가 실행.

다음의 load()는 외부 소스(이미지)가 완전히 로딩되면 이벤트 핸들러가 실행되고,
이미지 높잇값 300이 출력됨.