jQuery on() 메소드 사용법에 대한 자세한 설명 Tips_jquery

jQuery on() 메서드는 이벤트 바인딩을 위해 공식적으로 권장되는 메서드입니다.

코드 복사 코드는 다음과 같습니다.

$(selector).on(event,childSelector,data,function,map)

이로부터 확장된 이전의 몇 가지 일반적인 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

바인드()

　$("p").bind("클릭",function(){
Alert("해당 문단을 클릭했습니다.");
});

　$("p").on("클릭",function(){
Alert("해당 문단을 클릭했습니다.");
});

대리자()

　$("#div1").on("클릭","p",function(){
　　$(this).css("배경색","분홍색");
});

　$("#div2").delegate("p","click",function(){
　　$(this).css("배경색","분홍색");
});

라이브()

　$("#div1").on("클릭",function(){
　　$(this).css("배경색","분홍색");
});

　$("#div2").live("클릭",function(){
　　$(this).css("배경색","분홍색");
});

위 세 가지 방법은 jQuery 1.8 이후에는 권장되지 않습니다. 공식에서는 jQuery 1.9에서 live() 메서드 사용을 중단했기 때문에 on() 메서드 사용을 권장합니다.

팁: on()에 바인딩된 메서드를 제거해야 하는 경우 off() 메서드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
​$("p").on("클릭",function(){
　　$(this).css("배경색","분홍색");
});
​$("버튼").click(function(){
　　$("p").off("클릭");
});
});

팁: 이벤트에 하나의 작업만 필요한 경우 one() 메서드를 사용할 수 있습니다

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
​$("p").one("클릭",function(){
　　$(this).animate({fontSize:" =6px"});
});
});

trigger() 바인딩

코드 복사 코드는 다음과 같습니다.

$(selector).trigger(event,eventObj,param1,param2,...)
$(문서).ready(함수(){
​$("입력").select(function(){
　　$("input").after("텍스트가 표시되었습니다!");
});
​$("버튼").click(function(){
　　$("input").trigger("select");
});
});

동일한 함수에 연결된 여러 이벤트

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("소개");
});
});

다양한 기능에 바인딩된 여러 이벤트

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
$("p").on({
mouseover:function(){$("body").css("배경색","lightgray");},
mouseout:function(){$("body").css("Background-color","lightblue");},
클릭:function(){$("body").css("배경색","노란색");}
});
});

맞춤 이벤트 바인딩

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! 정말 아름다운 이름이네요!").show();
});
$("버튼").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

함수에 데이터 전달

코드 복사 코드는 다음과 같습니다.

함수 handlerName(이벤트)
{
경고(event.data.msg);
}

$(문서).ready(함수(){
$("p").on("click", {msg: "방금 나를 클릭했습니다!"}, handlerName)
});

생성되지 않은 요소에 적용

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
$("div").on("클릭","p",function(){
$(this).slideToggle();
});
$("버튼").click(function(){
$("

새로운 문단입니다.

").insertAfter("button");
});
});