물론 그 장점은 이것에만 국한되지 않습니다. JQuery 이벤트 처리 메커니즘을 사용하는 것은 Javascript 자체에 내장된 일부 이벤트 응답 메서드를 직접 사용하는 것보다 더 유연하고 노출될 가능성이 적으며 더 우아한 구문을 갖습니다. 우리 작업의 규모가 크게 줄어듭니다.
JQuery의 이벤트 처리 메커니즘에는 페이지 로딩, 이벤트 바인딩, 이벤트 위임, 이벤트 전환이라는 네 가지 메커니즘이 포함됩니다. $(document).ready() 이벤트부터 시작해 보겠습니다.
1. 페이지 로딩 $(document).ready()는 Javascript의 onLoad() 이벤트와 동일합니다. 이 메소드는 페이지가 로드될 때 실행되지만 둘 사이에는 미묘한 차이가 있습니다. . 의 경우, HTML 다운로드가 완료되어 DOM 트리로 구문 분석된 후에 Ready() 이벤트가 실행될 수 있지만, onLoad() 이벤트는 HTML 포함 파일이 다운로드될 때까지 실행될 수 없습니다. Ready() 이벤트에 다른 이벤트나 함수를 바인딩할 수 있습니다. Ready()에 대한 구문은 여러 가지가 있습니다.
$(document).ready(function(){});
$().ready(function(){});
$(function(){});
물론 저는 개인적으로 가독성을 높이기 위해 첫 번째 방법을 사용하는 데 여전히 익숙합니다. 주의해야 할 점은 Ready() 이벤트를 사용할 때 onload 이벤트가 없는지 확인하십시오.
요소에 함수를 등록하세요. 그렇지 않으면 $(document).ready() 이벤트가 트리거되지 않습니다. 동일한 페이지에서 $(document).ready() 이벤트를 무제한으로 사용할 수도 있습니다. 등록된 기능은 (코드 내에서) 순서대로 실행됩니다.2. 이벤트 전환에는 hover()와toggle() 두 가지 메소드만 있는데, 이는 결합된 사용자 작업을 가로채서 여러 함수로 응답하므로 복합 이벤트 처리 메커니즘. hover() 메소드는 마우스 호버 변경을 모방하는 메소드입니다. 간단히 말하면 마우스가 들어오고 나갈 때 지정한 동작을 실행하는 메소드입니다. 가장 일반적으로 사용되는 메소드는 메뉴 전환 효과를 만드는 것입니다. Toggle() 메서드는 클릭할 때 지정한 함수 메서드를 순서대로 실행하는 것입니다. 첫 번째 클릭은 두 번째 함수를 실행하는 식으로 이벤트 바인딩에서 unbind를 사용할 수 있습니다. ') 메소드를 삭제합니다.
hover(over,out) 인스턴스:
live(type,fn):live()의 유형 매개변수는 현재 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, 키업 이벤트. 예시는 다음과 같습니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
