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() { 
//this is the coding... 
}); 
>$().ready(function() { 
//this is the coding... 
}); 
>$(function() { 
//this is the coding... 
});

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 속성을 사용하여 이벤트를 명확히 합니다object
이벤트 핸들러의 이벤트 변수는 이벤트 객체를 저장합니다. . 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) 클릭할 때마다 호출되는 함수를 토글합니다.

위 내용은 jQuery의 몇 가지 일반적인 이벤트 함수 사용 예 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!