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의 상태에 따라 트리거됩니다. 그들은 ,

및 는 이미지, 스크립트, IFRAME 및

객체 자체와 같은 외부 리소스를로드하는 요소에 처리기를 첨부하는 데 사용될 수 있습니다. 이벤트는 부착 된 요소와 모든 어린이 요소가 완전히로드되면 발사됩니다. 이미지와 함께 사용하면 몇 가지 문제가 발생합니다. 첫째, DOM 트리를 올바르게 기포하지 않습니다. 두 번째 문제는 신뢰할 수 있거나 브라우저가 아니라는 것입니다. 사용자가 웹 내비게이션에서 떠날 때 이벤트가 트리거됩니다. 사용자가 링크를 클릭하거나 주소 표시 줄에 새 URL을 입력하거나 브라우저 창을 닫았 기 때문일 수 있습니다. 페이지 새로 고침 도이 이벤트를 트리거합니다. 를 사용하면 이벤트가 취소되지 않습니다. 또한, 대부분의 브라우저는이 이벤트 핸들러 내에서

,

및 에 대한 통화를 무시합니다. 즉, 다음 코드는 작동하지 않습니다.

모두 와 load 모두 버전 1.8 이후 더 이상 사용되지 않았습니다. unload 이벤트 ready 대부분의 경우, 모든 요소 (예 : 이미지)는 스크립트가 문제없이 실행될 때까지 완전히로드 할 필요는 없습니다. DOM 계층 구조가 완전히 구축되었는지 확인해야합니다. 이벤트는 이것을 당신을 위해 처리합니다. 이 이벤트에 첨부 된 모든 핸들러는 DOM이 준비된 후에 만 ​​실행됩니다. 핸들러 내부에서는 jQuery 코드를 실행하거나 이벤트 핸들러를 걱정하지 않고 다른 요소에 첨부 할 수 있습니다.

코드 펜 데모는 고해상도 이미지를로드합니다. 이미지가 완전히로드되기 전에 DOM이 준비되었음을 알 수 있습니다.

load() Codepen Demo window

보기 코드가 일부 CSS 스타일 속성의 값에 의존하는 경우 먼저 실행하기 전에 해당 스타일 또는 임베디드 스타일에 대한 참조를 제공해야합니다.

키보드 이벤트 키보드 이벤트는 키보드와의 모든 사용자의 상호 작용으로 트리거 될 수 있습니다. 이러한 각 이벤트에는 주요 프레스 및 이벤트 유형에 대한 정보가 포함됩니다. jQuery - , 및 에는 3 개의 키보드 이벤트 바로 가기가 있습니다.

keydown() 및 keyup() 이벤트 이름에서 알 수 있듯이 사용자가 키보드에서 키를 출시 할 때 keypress()가 트리거됩니다. 두 이벤트의 핸들러는 모든 요소에 첨부 될 수 있지만 현재 초점이있는 요소의 핸들러 만 트리거됩니다.

이벤트 객체의

속성을 ​​사용하여 누르는 키를 누르는 것이 좋습니다. 브라우저는 다른 속성을 사용 하여이 정보를 저장하고 jQuery는이 정보를 안정적으로 검색하기 위해 keyup 속성을 ​​정규화하기 때문입니다. keydown 기억할 가치가있는 또 다른 것은 두 이벤트가

와

를 구별하지 않는다는 것입니다. 후자의 경우 및 keyup가 별도로 등록됩니다. 아래 코드에서는 사용자에게 keydown 이벤트를 등록하는 경고 상자를 표시합니다. 키를 누르면 특정 요소가 DOM에서 삭제됩니다.

which Codepen Demo which

보기 이벤트

이 이벤트는 이벤트와 유사합니다. 한 가지 주요 차이점은 수정 자 및 비 인쇄 키 (예 : , 등)가 <kbd>a</kbd> 이벤트를 트리거하지 않는다는 것입니다. <kbd>shift a</kbd> 이벤트를 사용하여 특수 키 (예 : 화살표 키)를 캡처해서는 안된다고 말하면 너무 많이 넣을 수 없습니다. 입력 한 캐릭터 (예 : A 또는 A)를 알고 싶을 때 <kbd>shift</kbd>를 사용해야합니다. <kbd>a</kbd> 다음 코드 스 니펫은 프레스를 기반으로 요소를 숨 깁니다. keydown <kbd>y</kbd> Codepen Demo

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

보기 마우스 이벤트 사용자가 포인팅 장치 (예 : 마우스)와 상호 작용할 때 마우스 이벤트가 트리거됩니다. 이 이벤트는 클릭 (예 : , )을 기반으로하거나 모바일 (예 : , )을 기반으로 할 수 있습니다. 이 섹션에서는 이러한 모든 사건에 대해 간략하게 논의하고 그 사건들 사이의 약간의 차이점을 설명하기위한 시연을 포함시킬 것입니다.

클릭 기반 이벤트 jQuery는 5 개의 클릭 기반 이벤트 방법을 정의합니다. 사용자가 각각 요소의 마우스 버튼을 눌러 각각 이벤트 (이름에서 볼 수 있음)가 발사됩니다. 한편, 이벤트는 마우스 버튼을 지정된 요소에 눌러 이후에 릴리스 할 때만 트리거됩니다.

약간 복잡합니다. 이벤트를 로 등록하려면 시스템 관련 계산 간격이 만료되기 전에 두 번의 빠른 마우스 클릭이 있어야합니다. 더블 클릭으로 트리거 된 이벤트는 브라우저 별이기 때문에 핸들러를 단일 요소의 dblclick 및 dblclick 모두에 부착해서는 안됩니다. 일부 브라우저는 두 번 클릭하기 전에 두 개의 단일 클릭 이벤트를 등록 할 수 있으며, 다른 브라우저는 두 번 클릭하기 전에 단일 클릭 이벤트 만 등록 할 수 있습니다. click dblclick 요소를 마우스 오른쪽 버튼으로 클릭 한 후에는 컨텍스트 메뉴가 표시되기 전에 이벤트가 트리거됩니다. 즉, 이벤트 핸들러에서 해당 코드를 사용하여 기본 컨텍스트 메뉴가 표시되는 것을 방지 할 수 있습니다.

다음 코드 스 니펫은 마우스 오른쪽 버튼을 클릭 할 때 기본 컨텍스트 메뉴가 표시되는 것을 방지하지만 대신 사용자 정의 메뉴가 표시됩니다.

이 데모는 이미지를 클릭 할 때 이미지에 CSS 스타일을 적용하고 사용자 정의 컨텍스트 메뉴가 있습니다. contextmenu Codepen Demo

보기 모바일 기반 이벤트 일부 이벤트는 마우스 포인터의 움직임, 요소에 들어가거나 제거하는 것을 기반으로합니다. 6 가지 모바일 기반 이벤트 방법이 있습니다.

이벤트부터 시작하겠습니다. 이름에서 알 수 있듯이 마우스 포인터가 요소에 들어가면 두 이벤트 모두 발사됩니다. 마찬가지로, 마우스 포인터가 요소를 떠날 때,
및

이벤트가 발사됩니다.

와

의 한 가지 차이점은 전자가 마우스 포인터가 바인딩하는 요소 외부에서 움직일 때만 발사된다는 것입니다. 반면에, 요소의 후손들 외부의 움직임조차도

가 트리거 될 것입니다.

와 사이에는 정확히 동일한 차이가 있습니다.

Codepen Demo mouseover mouseenter보기 마우스 움직임, mouseleave 및 mouseout에 따라 이벤트가 어떻게 변하는 지 보자. 오른쪽에서 큰 파란색 상자를 입력하고 오른쪽의 분홍색 상자에 들어가기 전에 멈추십시오.

와

는 이제 모두 값이 1이어야합니다. 왼쪽으로 움직이고 분홍색 상자에 들어가면 mouseleave 카운트가 2로 변경됩니다. 이것은 mouseout의 이벤트가 버블 링이기 때문에 발생합니다. 핑크 박스의 mouseout 이벤트는 외부 파란색 상자에 "bubles"로 이벤트를 1만큼 증가시킵니다. 왼쪽으로 더 이동하면 두 개의 분홍색 상자 사이를 멈출 때 이벤트가 다시 시작됩니다. 파란색 상자의 왼쪽 끝에 도달하면 mouseenter 이벤트의 수는 5 여야하며 mouseover 이벤트의 수는 여전히 1이어야합니다.

정확히 동일한 추론을 사용하여

및 이벤트의 수를 설명 할 수 있습니다. 다른 방향으로 이동하고 카운트가 어떻게 변하는 지 확인하십시오.

및 mousemove 이벤트 마우스 포인터가 요소 내에서 움직일 때 이벤트가 트리거됩니다. 마우스가 움직이는 한 픽셀만큼 작더라도 트리거됩니다. 따라서 수백 가지의 이벤트는 아주 짧은 시간에 트리거 될 수 있습니다. 상상할 수 있듯이 이벤트 핸들러에서 복잡한 작업을 수행하면 브라우저가 지연됩니다. hover 이벤트 핸들러를 가능한 한 효율적으로 만들고 더 이상 필요하지 않은 경우 해제하는 것이 좋습니다.

마우스 포인터가 요소로 들어가거나 떠날 때만 가 없습니다.

메소드를 호출하는 두 가지 방법이 있습니다. 첫 번째는 다음과 같습니다. mousemove 여기서, 마우스 포인터가 요소로 들어가면 마우스 포인터가 요소를 떠날 때 mousemove가 실행됩니다. 두 번째 방법은 다음과 같습니다

이번에는 요소를 입력하고 떠날 때 동일한

함수가 실행됩니다. hover hover Codepen Demo

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

보기 참고 :이 데모는 CSS 필터 효과를 사용하여 지원하지 않습니다.

handlerIn() 형태 이벤트 형태는 인터넷의 모든 곳에 있습니다. 거의 모든 사용자는 어느 시점에서 양식을 작성합니다. JQuery는 형태 이벤트를 처리하는 특별한 방법이 있습니다. 이러한 이벤트는 값이 변경되거나 초점을 잃으면 해고 될 수 있습니다. 총 7 가지 형태의 이벤트가 있으며, 우리는 그것들을 하나씩 논의 할 것입니다. handlerOut() ,

,

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

,

및 이벤트 요소가 초점을 맞출 때마다 handlerInOut 이벤트가 트리거됩니다. 양식 요소 및 앵커 태그만으로 작동합니다. 다른 요소에 초점을 맞추려면 요소의

속성을 ​​설정해야합니다. Internet Explorer에서 숨겨진 요소에 초점을 맞추면 오류가 발생할 수 있습니다. 초점을 명시 적으로 설정하지 않고

이벤트를 트리거 해야하는 경우 메소드를 호출 할 수 있습니다. 요소가 초점을 잃을 때마다 이벤트가 트리거됩니다. 이전 브라우저 에서이 이벤트는 요소를 형성하는 데만 적용됩니다.

이벤트와 달리,

는 요소 나 그 후손이 초점을 맞출 때마다 트리거됩니다. 마찬가지로,

는 요소 나 그 후손이 초점을 잃을 때마다 트리거됩니다. 따라서 이벤트가 거품을 일으키려면 두 이벤트를 모두 사용해야합니다.

,

및

이벤트 요소의 값이 변경되면

이벤트가 트리거됩니다. 이 이벤트는 ,

및 blur 요소에만 적용됩니다. 확인란, 라디오 버튼 및 선택 상자의 경우이 이벤트는 사용자가 선택한 직후에 트리거됩니다. 다른 요소에서는 요소가 초점을 잃은 후에 만 ​​발사됩니다. 또한 JavaScript를 사용하여 입력 요소의 값을 변경하면이 이벤트가 트리거되지 않습니다. focus 사용자가 요소 내에서 텍스트를 선택하면 이벤트가 트리거됩니다. 이 이벤트는 더 제한된 범위를 가지며

및 select 요소에만 적용됩니다. 선택한 텍스트를 검색하려면 크로스 브라우저 jQuery 플러그인을 사용해야합니다. <input>

사용자가 양식을 제출하려고 할 때 <textarea></textarea> 이벤트가 트리거됩니다. 요소를 형성하기 위해 처리기 만 첨부 할 수 있습니다. 이 이벤트를 트리거하려면 사용자는 , 또는 요소를 클릭해야합니다. 흥미롭게도 JavaScript 이벤트는 Internet Explorer에서 거품이되지 않습니다. 그러나이 동작은 jQuery 버전 1.4 이후 브라우저에서 표준화되었습니다.

submit Codepen Demo <button></button> <input type="submit">보기 jQuery 3 <input type="image">의 변화 jQuery 버전 1.8 이후 , 및 submit 메소드가 더 이상 사용되지 않았습니다. 방법은 본질적으로 불분명합니다. 이 방법은 Ajax 하중 또는 실제로

이벤트를 해고 할 수 있습니다. 마찬가지로, 방법은 또한

방법과 혼동 될 수있다. 이제 jQuery 3에서 이러한 방법이 마침내 제거되었습니다. 이제이 이벤트 리스너를 등록하려면 메소드를 사용해야합니다. 최종 사고 이 기사에서는 모든 주요 jQuery 이벤트 방법과 유사한 이벤트의 차이점을 다루었습니다.

대신 를 사용하는시기를 아는 것은 번거 로움을 피하고 귀중한 시간을 절약하는 데 도움이 될 수 있습니다. 순수한 JavaScript를 사용하여 DOM 이벤트에 연결할 수는 있지만 JQuery는 웹 사이트/응용 프로그램이 지원 해야하는 브라우저에 따라 백그라운드에서 크로스 브라우저 차이를 약간 정상화하여 이점이 될 수 있습니다.

이벤트에 대해 자세히 알아 보려면 공식 jQuery 문서에 액세스 할 수 있습니다. jQuery에서 이벤트 사용에 대한 질문이나 팁이 있으면 의견을 남겨주십시오.

jQuery 이벤트 (FAQ)의 FAQ jQuery의 이벤트가 거품이 막히는 것을 방지하는 방법은 무엇입니까?

jQuery에서는 load 방법을 사용하여 이벤트가 DOM 트리의 위쪽으로 거품을 방지하지 못하게 할 수 있습니다. 이 방법은 이벤트가 부모 요소로 전파되는 것을 방지합니다. 기본 동작이 발생하는 것을 방해하지는 않습니다. 다음은 사용 방법의 예입니다. error unload에서 와 load() 방법의 차이점은 무엇입니까? load jQuery의 및 error 메소드는 둘 다 이벤트 핸들러를 요소에 첨부하는 데 사용됩니다. 그들 사이의 주요 차이점은 jQuery.error()가 핸들러를 현재 요소에만 첨부하는 반면 on는 핸들러를 현재 요소와 미래의 선택기와 일치하는 모든 요소에 첨부한다는 것입니다. 그러나

방법이 jQuery 1.7 이후에도 더 이상 사용되지 않았으며 jQuery 1.9에서 제거되었다는 점은 주목할 가치가 있습니다. 대신 메소드를 사용해야합니다.

jQuery에서 프로그래밍 방식으로 이벤트를 트리거하는 방법은 무엇입니까?

메소드를 사용하여 jQuery에서 프로그래밍 방식으로 이벤트를 트리거 할 수 있습니다. 이 방법을 사용하면 요소에서 지정된 이벤트를 수동으로 트리거 할 수 있습니다. 예는 다음과 같습니다.

jQuery의 이벤트 대의원은 무엇이며 왜 유용합니까? .trigger() jQuery의 이벤트 대표단은 이벤트 핸들러를 개별 요소에 바인딩하는 대신 이벤트 처리를 부모 요소로 위임하는 기술입니다. 이것은 이벤트 핸들러가 필요한 많은 요소가 있거나 DOM에 요소를 동적으로 추가 할 때 특히 유용합니다. 구속력이 필요한 이벤트 처리기 수를 줄임으로써 성능을 향상시킵니다.

jQuery에서 이벤트의 기본 작업을 차단하는 방법은 무엇입니까?

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

당신은

메소드를 사용하여 jQuery에서 이벤트의 기본 작업을 차단할 수 있습니다. 이 메소드는 이벤트의 기본 작업이 발생하는 것을 방지합니다. 예를 들어, 링크가 URL을 따르는 것을 방지 할 수 있습니다.

jQuery에서

와

의 차이는 무엇입니까?

jQuery의 방법은 의 약어입니다. 두 방법 모두 클릭 이벤트 처리기를 선택한 요소에 첨부합니다. 그러나 event.preventDefault() 방법은 동적으로 추가 된 요소의 이벤트를 처리 할 수 ​​있고 한 번에 여러 이벤트를 처리 할 수 ​​있기 때문에 유연성이 향상됩니다.

jQuery에서 이중 클릭 이벤트를 감지하는 방법은 무엇입니까?

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

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

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

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

jQuery에서 마우스 오른쪽 버튼 클릭 이벤트를 감지하는 방법은 무엇입니까?

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

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