jQuery의 이벤트를 포괄적으로 살펴 봅니다

이 기사는 Wern Ancheta와 Camilo Reyes에 의해 검토되었습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!

jQuery는 웹 페이지에서 거의 모든 사용자 상호 작용 동작을 캡처하여 이벤트로 정의 할 수 있습니다. 이벤트의 중요성은 사용자의 동작에 따라 그에 따라 응답 할 수 있다는 것입니다. 예를 들어 버튼 클릭 또는 스크롤 이벤트를 기반으로 웹 페이지의 배경색을 변경하기 위해 코드를 작성할 수 있습니다.

jQuery에는 다른 이벤트를 처리하기위한 , 및 와 같은 많은 빠른 방법이 있습니다. 전용 방법 외에도 JQuery는 모든 이벤트에 처리기를 첨부 할 수있는 공통 메소드를 제공합니다. 이 방법은 표준 DOM 이벤트를위한 포장지 일뿐 아니라 순수한 JavaScript로 핸들러를 추가 할 수 있습니다. 이 자습서는 이러한 모든 이벤트 방법 (5 가지 주요 범주로 나뉘어 있음)을 빠르게 살펴보고 사용할 때 모범 사례를 논의합니다.

키 포인트

jQuery 이벤트는 사용자 상호 작용을 캡처하여 반응 형 및 대화식 웹 응용 프로그램을 가능하게합니다. 이벤트 처리기를 첨부하려면 contextmenu()와 같은 메소드를 사용하십시오. hover() jQuery의 브라우저 이벤트에는 오류 처리, Windows 크기 조정 및 스크롤이 포함되며, 최신 버전의 특정 특정 방법이 더 이상 사용되지 않아 keyup()의 사용을 강조합니다. on 문서로드 이벤트는 스크립트가 DOM이 완전히 준비된 후에 만 ​​실행되도록하여 초기화되지 않은 요소와 관련된 오류를 피합니다. on('eventName', handler) jQuery의 키보드 및 마우스 이벤트는 키 프레스에서 마우스 움직임에 이르기까지 다양한 상호 작용을 처리합니다.

양식 이벤트는 사용자 입력 및 상호 작용을 양식 내에서 처리하는 전용 이벤트를 제공하여 초점, 변경 및 제출물을 효과적으로 관리하기 위해 전용 이벤트를 제공합니다.

브라우저 이벤트 이 범주에는 세 가지 이벤트가 포함되어 있습니다. 이미지와 같은 요소가 잘못로드되면 이벤트가 트리거됩니다. 바로 가기 방법은 jQuery 버전 1.8 이후 더 이상 사용되지 않았으므로 대신

를 사용해야합니다.

이벤트

이 이벤트는 브라우저 창의 크기가 변경 될 때마다 트리거됩니다. 구현 방법에 따라 다른 브라우저가
• 핸들러를 다른 방식으로 호출 할 수 있습니다. Internet Explorer 및 WebKit 기반 브라우저는 핸들러를 지속적으로 호출하는 반면 Opera와 같은 브라우저는 이벤트가 종료 될 때만 호출합니다. .on() 다음 코드 스 니펫은 창 폭 에 따라 이미지를 교환합니다.
• .on('eventName', handler)' 이 코데 펜 데모는 이벤트의 실제 효과를 보여줍니다.
Codepen Demo
보기 이벤트

사용자가 특정 요소의 다른 위치로 스크롤하면 요소 가이 이벤트를 트리거 할 수 있습니다. scroll 객체를 제외하고, 스크롤 막대가있는 요소는이 이벤트를 트리거 할 수 있습니다. 예를 들어,

속성을 ​​로 설정하거나 스크롤 가능한 iframe을 설정하는 요소 가이 이벤트를 트리거 할 수 있습니다.

스크롤 위치가 변경 될 때마다 핸들러가 호출된다는 것을 기억하십시오. 두루마리의 원인은 중요하지 않습니다. 화살표 키를 누르거나 스크롤 바를 클릭하거나 드래그하거나 마우스 휠을 사용하여 트리거 할 수 있습니다. 아래 코드에서 사용자가 500 픽셀 이상을 스크롤하고 일부 작업을 수행하는지 확인합니다. window overflow 아래의 코피 펜 데모에서는 스크롤을 계속하고 바닥 근처에 도달하면 페이지 하단에 거의 도달했음을 알리는 알림이 표시됩니다. scroll Codepen Demo

보기 문서 로딩 이벤트 jQuery에는 세 가지 방법이 있으며,이 방법은 문서 또는 DOM의 상태에 따라 트리거됩니다. 그들은 ,

및

메소드를 사용하여 jQuery에서 이중 클릭 이벤트를 감지 할 수 있습니다. 이 메소드는 선택한 요소에서 이중 클릭 이벤트가 발생할 때 실행되는 함수를 첨부합니다. 예는 다음과 같습니다. .click() jQuery의 여러 이벤트를 요소에 바인딩하는 방법은 무엇입니까? .on('click') 당신은

메소드를 사용하여 여러 이벤트를 jQuery의 요소에 바인딩 할 수 있습니다. 이 방법을 사용하면 여러 이벤트 핸들러를 선택한 요소에 첨부 할 수 있습니다. 예는 다음과 같습니다.

jQuery에서 이벤트 핸들러를 해제하는 방법은 무엇입니까? .click() 당신은 .on('click') 메소드를 사용하여 jQuery에서 이벤트 핸들러를 풀어 줄 수 있습니다. 이 메소드는 .on()를 사용하여 첨부 된 이벤트 핸들러를 제거합니다. 예는 다음과 같습니다.

jQuery에서 마우스 오른쪽 버튼 클릭 이벤트를 감지하는 방법은 무엇입니까?
메소드를 사용하거나 이벤트에서 이벤트 객체의 "그"속성을 확인하여 jQuery에서 마우스 오른쪽 버튼 클릭 이벤트를 감지 할 수 있습니다. "Why"속성은 마우스 오른쪽 클릭으로 3입니다. 예는 다음과 같습니다.

위 내용은 jQuery의 이벤트를 포괄적으로 살펴 봅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!