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() has 세 가지 작성 방법은 다음과 같습니다.
> $(document).ready(function() {
//이것은 코딩입니다...
>$(); .ready(function( ) {
//코딩입니다...
})
>$(function() {
//코딩입니다...
});

2. 이벤트 캡처 및 이벤트 버블링 이벤트 캡처: 여러 요소가 이벤트에 응답할 수 있도록 하는 전략입니다. 이벤트 캡처 프로세스 중에 이벤트는 먼저 가장 바깥쪽 요소에 전달된 다음 보다 구체적인 요소에 전달됩니다.
이벤트 버블링: 또 다른 반대 전략은 이벤트가 발생하면 가장 구체적인 요소로 먼저 전송됩니다. 이 요소가 응답할 기회를 얻은 후에 이벤트는 더 일반적인 요소로 버블링됩니다. 이벤트 버블링에는 때때로 부작용이 있어 예기치 않은 동작이 발생할 수 있습니다.

3. 이벤트 버블링을 방지하는 세 가지 방법 기본 동작 지정
.preventDefault() 메서드를 호출하면 기본 동작이 시작되기 전에 이벤트를 종료할 수 있습니다.
이벤트 전파를 중지하려면 event.stopPropagation()을 호출하세요.
jQuery는 이벤트 버블링을 완전히 방지할 수 있는 .stopPropagation() 메서드를 제공합니다. 예시 코드는 다음과 같습니다.
stopPropagation() 메소드를 사용하여 이벤트 버블링 방지

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

$(document).ready(function() {
$('switcher').click(function(event){
if(this.id == 'switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id == 'switcher-large'){
$ ('body').addClass( 'large');
}
$('switcher .button').romoveClass('selected')
$(this).addClass('selected') ;
event.stopPropagation( ; 객체. event.tatget 속성은 이벤트가 발생한 대상 요소를 저장합니다. 이 속성은 DOM API에 지정되지만 모든 브라우저에서 구현되는 것은 아닙니다. jQuery는 이 속성을 모든 브라우저에서 사용할 수 있도록 이 이벤트 개체에 필요한 확장을 만듭니다. .target을 통해 이벤트를 처음 수신한 DOM의 요소를 확인할 수 있습니다. 게다가 우리는 이것이 이벤트를 처리하는 DOM 요소를 참조한다는 것을 알고 있습니다.
event.tatget 속성을 사용하여 이벤트 객체를 명확하게 하여 이벤트 버블링을 방지하는 코드는 다음과 같습니다.

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

$(document).ready(function() { $('switcher').click(function(event){ if(event.target == this) { $('switcher .button').toggleClass('hidden') } };)

}); >

4. 일반적으로 사용되는 이벤트 바인딩

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

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


$(document).ready(function(){

$('#swotcjer').one('click',toggleStyleSwitcher); } )
5. 복합 이벤트
이벤트를 캡처할 때 결합된 사용자 작업을 캡처하고 여러 기능으로 응답해야 하는 경우가 많습니다.
jQuery에서 제공하는 .read() 메서드는 가장 일반적으로 사용되는 이벤트 호환 메서드 중 하나입니다. 또한 대화형 처리에 사용되는 두 가지 함수가 있습니다.
.hover(over,out) 시뮬레이션하는 메서드입니다. 호버 이벤트(마우스가 개체 위로 이동하거나 개체 밖으로 이동함) 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.
.toggle(fn,fn)은 클릭할 때마다 호출되는 함수를 전환합니다.