jquery_jquery의 일반 이벤트 바인드, 호버, 토글 및 기타 예제 소개

1.$(document).ready()

$(document).ready()는 jQuery에서 JavaScript 내장 onload 이벤트에 응답하고 작업을 수행하는 일반적인 방법입니다. onload와 비슷한 효과가 있습니다. 하지만 몇 가지 차이점이 있습니다.

문서가 브라우저에 완전히 다운로드되면 window.onload 이벤트가 트리거됩니다. $(document).ready()를 사용하여 등록된 이벤트 핸들러는 html이 다운로드되고 Dom 트리로 구문 분석된 후 코드를 실행하지만 모든 관련 파일이 다운로드되었음을 의미하지는 않습니다.

페이지에는 일반적으로 하나의 onload 이벤트 핸들러만 있으며 한 번에 하나의 함수에 대한 참조만 저장할 수 있지만 $(document).ready()는 여러 개를 가질 수 있습니다.

일반적으로 말하면 $(document).ready()는 onload 이벤트 핸들러를 사용하는 것보다 낫습니다. 다만, 관련 파일이 로딩되지 않은 경우에는 이미지 높이, 너비 등의 속성을 호출하는데 문제가 발생하므로, 그때그때 적절한 방법을 선택해야 합니다.

$(document).ready()에는 세 가지 작성 방법이 있습니다.

$(document).ready(function(){ 

//thisis the coding... 

});


$().ready(function(){ 

//thisis the coding... 

});


$(function(){ 

//thisis the coding... 

});

2. 이벤트 바인딩

문법

$(selector).bind(이벤트,데이터,함수)

매개변수 및 설명:

이벤트: 필수입니다. 요소에 추가할 하나 이상의 이벤트를 지정합니다. 여러 이벤트는 공백으로 구분됩니다. 유효한 이벤트여야 합니다.

데이터는 선택사항입니다. 함수에 전달될 추가 데이터를 지정합니다.

기능이 필요합니다. 이벤트가 발생할 때 실행할 함수를 지정합니다.

해당하는 것은 unbind()입니다: 이벤트 제거

예: $('#idchoose').unbind("click",Function_Name)

약어 바인딩 이벤트: 일반적으로 약어를 선호합니다

$("#dividelement").bind("click",function(){//do something})改写为：

$("#dividelement").click(function(){//do something }

jQuery는 .bind() 메서드를 사용하여 이벤트를 요소에 바인딩하고, .unbind() 메서드를 사용하여 요소 바인딩을 해제합니다. 또한 .bind() 메서드는 여러 바인딩을 수행할 수 있으며 바인딩이 없으면 바인딩을 해제해도 안전합니다.

이벤트는 한 번만 실행되면 즉시 바인딩이 해제되어야 하는 경우가 많습니다. 기존 접근 방식에 따르면 이벤트를 먼저 바인딩한 다음 이벤트가 실행된 후에 바인딩을 해제할 수 있습니다. jQuery는 위 시나리오에서 지루한 코드 작성을 구체적으로 해결하기 위해 단축 메소드를 제공합니다.

$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher);

});

바인드를 사용하여 이벤트를 바인딩할 때의 장점은 맞춤 이벤트를 정의하고 여러 이벤트를 한 번에 바인딩할 수 있다는 것입니다.

3. 합성 이벤트

이벤트를 캡처할 때 결합된 사용자 작업을 캡처하고 여러 기능으로 응답해야 하는 경우가 많습니다. 이러한 이벤트를 복합 이벤트라고 합니다.

jQuery에서 제공하는 .ready() 메소드는 가장 일반적으로 사용되는 이벤트 메소드 중 하나이며, 대화형 처리에 사용되는 두 가지 함수가 있습니다.

.hover(enter,leave) 호버 이벤트(마우스가 개체 위 또는 개체 밖으로 이동)를 시뮬레이션하는 메서드입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.

$(function(){

$("#panelh5.head").hover(function(){

$(this).next().show();

},function(){

$(this).next().hide(); 

})

})

.toggle(fn1,fn2,..fnN) 클릭할 때마다 호출되는 함수를 토글합니다. 연속적인 마우스 클릭 이벤트를 시뮬레이션하는 데 사용됩니다. 예:

$(function(){

$("#panelh5.head").toggle(function(){

$(this).addClass("highlight");

$(this).next().show();

},function(){

$(this).removeClass("highlight");

$(this).next().hide();

});

})

4. 이벤트 객체와 이벤트 버블링

이벤트 객체: 프로그램에서 이벤트 객체를 사용하는 것은 매우 간단합니다. 예를 들어 함수에 매개변수만 추가하면 됩니다.

$(“element”).click(function(event){

//event:事件对象

})

'요소' 요소를 클릭하면 이벤트 객체가 생성됩니다. 이 객체는 이벤트 핸들러에서만 액세스할 수 있습니다. 이벤트 처리 함수의 실행이 완료되면 이벤트 객체가 소멸됩니다.

이벤트 캡처: 여러 요소가 이벤트에 응답할 수 있도록 하는 전략입니다. 이벤트 캡처 프로세스 중에 이벤트는 먼저 가장 바깥쪽 요소에 전달된 다음 보다 구체적인 요소에 전달됩니다. (body->div->span)

이벤트 버블링: 또 다른 반대 전략은 이벤트가 발생하면 가장 구체적인 요소로 먼저 전송됩니다. 이 요소가 응답할 기회를 얻은 후에 이벤트는 더 일반적인 요소로 버블링됩니다. 이벤트 버블링에는 때때로 부작용이 있어 예기치 않은 동작이 발생할 수 있습니다. (span->div->body)

이벤트 버블링을 방지하는 세 가지 방법

.preventDefault() 메서드를 호출하여 기본 작업이 시작되기 전에 이벤트를 종료할 수 있습니다.

이벤트 전파를 중지하려면 event.stopPropagation()을 호출하세요

jQuery는 이벤트 버블링을 완전히 방지할 수 있는 .stopPropagation() 메서드를 제공합니다.

5. event.tatget 속성을 사용하여 이벤트 객체를 명확히 합니다

이벤트 핸들러의 이벤트는 이벤트 개체를 저장합니다. event.tatget 속성은 이벤트가 발생한 대상 요소를 저장합니다. 이 속성은 DOMAPI에 지정되어 있지만 모든 브라우저에서 구현되는 것은 아닙니다. jQuery는 이 속성을 모든 브라우저에서 사용할 수 있도록 이 이벤트 개체에 필요한 확장을 만듭니다. .target을 통해 이벤트를 처음 수신한 DOM의 요소를 확인할 수 있습니다. 게다가 우리는 이것이 이벤트를 처리하는 DOM 요소를 참조한다는 것을 알고 있습니다.

event.tatget 속성을 사용하여 이벤트 개체를 지우고 이벤트 버블링을 방지합니다.

$(document).ready(function(){ 

$('switcher').click(function(event){

if(event.target== this) 

{

$('switcher.button').toggleClass('hidden'); 

}

};)

});

다른 이벤트 객체 속성에 대해서는 w3c 소개를 참조하세요.