다양한 브라우저 이벤트를 처리하는 다양한 jQuery API

이벤트 처리는 오늘날 웹 브라우저에서 다소 어려운 부분이며, 브라우저마다 이벤트를 처리하는 방식이 다릅니다. 따라서 이러한 크로스 브라우저 문제를 극복하기 위해 jQuery의 이벤트 처리 API를 활용할 수 있습니다.

jQuery는 다양한 브라우저 이벤트와 효과 등을 처리할 수 있는 방대한 API를 제공하는 작은 JavaScript 라이브러리입니다. JavaScript를 사용하여 브라우저 사용자 인터페이스 효과를 처리하는 방법에 대해 자세히 알아보세요. 이 튜토리얼에서는 다양한 브라우저 이벤트를 처리하기 위해 jQuery의 다양한 API를 탐색합니다.
페이지 로드 이벤트
Ready(FN),
이는 jQuery가 지원하는 모든 유형의 이벤트의 기본입니다. 페이지가 로드될 때 양식의 포커스를 설정하거나 일부 UI 효과를 수행할 수 있습니다.

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

$(document).ready(function ( ) {
$("p").text("이제 DOM이 로드되었으며 조작할 수 있습니다.")
})

이벤트 처리
바인딩(유형, 데이터, FN), 하나 이상의 이벤트(클릭/더블 클릭 등)를 처리하는 요소에 요소를 바인딩할 수 있습니다. 모든 요소에 대한 고객의 이벤트 핸들러와 함께 이 기능을 사용하십시오.

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

$("p").bind( "click" , function(e) {

var str = "( " e.pageX ", " e.pageY " )"
$("span").text("클릭이 발생했습니다! " str) ;
});
$("p").bind("dblclick", function() {
$("span").text("this.tagName에서 더블클릭이 발생했습니다) ;
});
$("p").bind("mouseenter mouseleave", function(e) {
$(this).toggleClass("over");
});

트리거(이벤트, 데이터)
는 일치하는 모든 요소에서 이벤트를 트리거합니다. 이렇게 하면 브라우저도 동일한 이름을 갖게 됩니다(존재하는 경우). ) 기본 작업이 수행됩니다. 예를 들어, Trigger()를 통한 함수는 브라우저가 양식의 "제출"을 제출하도록 합니다. 이벤트에 바인딩된 함수 중 하나를 반환하면 잘못된 기본 동작을 방지할 수 있습니다.
트리거된 이벤트는 브라우저 기반 이벤트로 제한되지 않으며 이벤트 트리거 바인딩 등록을 사용자 정의할 수도 있습니다.

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

$("button:first"). click(function () {

update($("span:first"));
})
$("button:last").click(function () {
$( "버튼: 첫 번째").trigger('클릭');
update($("span:last"))
})
function update(j) {
var n = parseInt(j .text(), 10);
j.text(n 1);
}

대화형 보조 활동
2.0 응용 프로그램, 사용자 유도 처리는 매우 중요합니다. jQuery는 이러한 상호 작용을 처리하는 데 사용할 수 있는 몇 가지 API를 제공합니다. 호버(다중) 이 함수는 호버 기능을 제공합니다. 즉, 마우스 커서가 일치하는 요소 위로 이동하면 지정된 첫 번째 기능이 실행됩니다. 마우스가 요소 위로 이동하면 두 번째로 지정된 함수가 실행됩니다. 또한 마우스가 여전히 지정된 요소(예: div 내부의 이미지) 위에 있는지 확인하세요. 그렇다면 계속 "호버" 상태를 유지하고 밖으로 이동하지 않습니다(mouseout 이벤트 핸들러를 사용할 때 일반적인 동작) 오류.

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

$("li").hover(

함수() {
$(this).append($("<span> ***</span>"))
},
함수() {
$( this).find("span:last").remove();
}
)

다른 활동을 위한 보조
다음은 다양한 유형의 이벤트 목록을 처리하는 데 사용할 수 있는 함수입니다. blur()
: 일치하는 각 요소에 대해 흐림 이벤트를 트리거합니다.

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

$("input").blur( function () {

$(this).next("span").css('display','inline').fadeOut(1000)
})

흐림(FN )
: 일치하는 각 요소의 흐림 이벤트에 핸들러 함수를 바인딩합니다. [코드]
$("input").blur(function () {
$(this).next("span").css('display','inline').fadeOut( 1000);
});


(FN)

: 일치하는 각 요소의 변경 이벤트에 함수를 바인딩합니다.

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

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str = $(this).text() "
})
$("div").text(str)
.change();

클릭(FN)
: 일치하는 각 요소의 클릭 이벤트에 바인딩된 함수입니다.

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

$("p").click( function () {

$(this).slideUp();
})
$("p").hover(function () {
$(this).addClass("hilite ");
}, function () {
$(this).removeClass("hilite");
});

더블클릭(FN) )
: 일치하는 각 요소에 대해 DblClick 이벤트를 트리거합니다.

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

var divdbl = $("div:first ");

divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});

키(FN)
: 일치하는 각 요소의 키 누르기 이벤트에 함수를 바인딩합니다.

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

$("input").keypress( 함수 (e ) {

if (e.which == 32 || (65 <= e.which & e.which <= 65 25)
|| (97 <= e.which && e.which <= 97 25)) {
var c = String.fromCharCode(e.which)
$("p").append($("<span/>"))
.children(":last")
.append(document.createTextNode(c))
} else if (e.which == 8) {
// IE에서는 백스페이스만 가능 keydown
$("p").children(":last").remove();
}
$("div").text(e.which)
}) ;


mousedown(FN)

: 일치하는 각 요소의 mousedown 이벤트에 바인딩된 함수입니다.

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

$("p").mouseup( function() {

$(this).append('<span style="color:#F00;">마우스를 위로 올리세요.</span>')
}).mousedown(function( ){
$(this).append('<span style="color:#00F;">마우스를 아래로 내리세요.</span>')



스크롤(FN)

: 일치하는 각 요소의 스크롤 이벤트에 핸들러 함수를 바인딩합니다.

코드 복사 코드는 다음과 같습니다. $("p").clone( ).appendTo (document.body);

$("p").clone().appendTo(document.body)

$("p").clone().appendTo(document.body) ;
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
}); 🎜>