이 기사는 Wern Ancheta와 Camilo Reyes에 의해 검토되었습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!
키 포인트
contextmenu()
와 같은 메소드를 사용하십시오. hover()
keyup()
의 사용을 강조합니다. on
on('eventName', handler)
.on()
.on('eventName', handler)'
scroll
객체를 제외하고, 스크롤 막대가있는 요소는이 이벤트를 트리거 할 수 있습니다. 예를 들어,
window
overflow
scroll
Codepen Demo
보기
<<>는 이미지, 스크립트, IFRAME 및
객체 자체와 같은 외부 리소스를로드하는 요소에 처리기를 첨부하는 데 사용될 수 있습니다. 이벤트는 부착 된 요소와 모든 어린이 요소가 완전히로드되면 발사됩니다. 이미지와 함께 사용하면 몇 가지 문제가 발생합니다. 첫째, DOM 트리를 올바르게 기포하지 않습니다. 두 번째 문제는 신뢰할 수 있거나 브라우저가 아니라는 것입니다.
모두 <🎜 🎜>와 load
모두 버전 1.8 이후 더 이상 사용되지 않았습니다. unload
<🎜 🎜> <<> 이벤트 ready
대부분의 경우, 모든 요소 (예 : 이미지)는 스크립트가 문제없이 실행될 때까지 완전히로드 할 필요는 없습니다. DOM 계층 구조가 완전히 구축되었는지 확인해야합니다. <🎜 🎜> 이벤트는 이것을 당신을 위해 처리합니다. 이 이벤트에 첨부 된 모든 핸들러는 DOM이 준비된 후에 만 실행됩니다. 핸들러 내부에서는 jQuery 코드를 실행하거나 이벤트 핸들러를 걱정하지 않고 다른 요소에 첨부 할 수 있습니다.
load()
<<> Codepen Demo window
<<> 키보드 이벤트 <🎜 🎜>
를 구별하지 않는다는 것입니다. 후자의 경우 <🎜 🎜> 및
이 이벤트는 <🎜 🎜> 이벤트와 유사합니다. 한 가지 주요 차이점은 수정 자 및 비 인쇄 키 (예 : <🎜 🎜>, <🎜 🎜> 등)가
<<> 클릭 기반 이벤트 <🎜 🎜>
<<> 약간 복잡합니다. 이벤트를 <🎜 🎜>로 등록하려면 시스템 관련 계산 간격이 만료되기 전에 두 번의 빠른 마우스 클릭이 있어야합니다. 더블 클릭으로 트리거 된 이벤트는 브라우저 별이기 때문에 핸들러를 단일 요소의 <🎜
이 데모는 이미지를 클릭 할 때 이미지에 CSS 스타일을 적용하고 사용자 정의 컨텍스트 메뉴가 있습니다.
보기
<<> 모바일 기반 이벤트 <🎜 🎜>
이벤트부터 시작하겠습니다. 이름에서 알 수 있듯이 마우스 포인터가 요소에 들어가면 두 이벤트 모두 발사됩니다. 마찬가지로, 마우스 포인터가 요소를 떠날 때, 와 <🎜 🎜> 사이에는 정확히 동일한 차이가 있습니다. <<> Codepen Demo 는 이제 모두 값이 1이어야합니다. 왼쪽으로 움직이고 분홍색 상자에 들어가면 및 <🎜 🎜> 이벤트의 수를 설명 할 수 있습니다. 다른 방향으로 이동하고 카운트가 어떻게 변하는 지 확인하십시오. 메소드를 호출하는 두 가지 방법이 있습니다. 첫 번째는 다음과 같습니다. 함수가 실행됩니다.
및 이벤트
이벤트를 트리거 해야하는 경우 메소드를 호출 할 수 있습니다.
는 요소 나 그 후손이 초점을 맞출 때마다 트리거됩니다. 마찬가지로, 이벤트
및
방법과 혼동 될 수있다. 이제 jQuery 3에서 이러한 방법이 마침내 제거되었습니다. 이제이 이벤트 리스너를 등록하려면
jQuery의 <🎜 🎜> 방법은 <🎜 🎜>의 약어입니다. 두 방법 모두 클릭 이벤트 처리기를 선택한 요소에 첨부합니다. 그러나
,
및 <🎜 🎜>에는 3 개의 키보드 이벤트 바로 가기가 있습니다. keydown()
<<> 및 keyup()
이벤트 <🎜 🎜>
keypress()
가 트리거됩니다. 두 이벤트의 핸들러는 모든 요소에 첨부 될 수 있지만 현재 초점이있는 요소의 핸들러 만 트리거됩니다. 속성을 사용하여 누르는 키를 누르는 것이 좋습니다. 브라우저는 다른 속성을 사용 하여이 정보를 저장하고 jQuery는이 정보를 안정적으로 검색하기 위해
와 keyup
속성을 정규화하기 때문입니다. keydown
keyup
가 별도로 등록됩니다. 아래 코드에서는 사용자에게 keydown
이벤트를 등록하는 경고 상자를 표시합니다. 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 <code class="language-javascript">$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$("img").attr("src", "image-src-here.jpg");
// 此处更改图像src。
}
});</code>
보기
<<<> 마우스 이벤트 <🎜 🎜>
dblclick
및 dblclick
모두에 부착해서는 안됩니다. 일부 브라우저는 두 번 클릭하기 전에 두 개의 단일 클릭 이벤트를 등록 할 수 있으며, 다른 브라우저는 두 번 클릭하기 전에 단일 클릭 이벤트 만 등록 할 수 있습니다. click
dblclick
요소를 마우스 오른쪽 버튼으로 클릭 한 후에는 컨텍스트 메뉴가 표시되기 전에 <🎜 🎜> 이벤트가 트리거됩니다. 즉, 이벤트 핸들러에서 해당 코드를 사용하여 기본 컨텍스트 메뉴가 표시되는 것을 방지 할 수 있습니다. contextmenu
<<> Codepen Demo <code class="language-javascript">$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$("img").attr("src", "image-src-here.jpg");
// 此处更改图像src。
}
});</code>
및 의 한 가지 차이점은 전자가 마우스 포인터가 바인딩하는 요소 외부에서 움직일 때만 발사된다는 것입니다. 반면에, 요소의 후손들 외부의 움직임조차도
가 트리거 될 것입니다. mouseover
mouseenter
보기
mouseleave
및 mouseout
에 따라 이벤트가 어떻게 변하는 지 보자. 오른쪽에서 큰 파란색 상자를 입력하고 오른쪽의 분홍색 상자에 들어가기 전에 멈추십시오. mouseleave
카운트가 2로 변경됩니다. 이것은 mouseout
의 이벤트가 버블 링이기 때문에 발생합니다. 핑크 박스의 mouseout
이벤트는 외부 파란색 상자에 "bubles"로 이벤트를 1만큼 증가시킵니다. 왼쪽으로 더 이동하면 두 개의 분홍색 상자 사이를 멈출 때 <🎜 🎜> 이벤트가 다시 시작됩니다. 파란색 상자의 왼쪽 끝에 도달하면 mouseenter
이벤트의 수는 5 여야하며 mouseover
이벤트의 수는 여전히 1이어야합니다. <<> 및
마우스 포인터가 요소로 들어가거나 떠날 때만 <🎜 🎜> <<>가 없습니다. mousemove
이벤트 <🎜 🎜>
hover
이벤트 핸들러를 가능한 한 효율적으로 만들고 더 이상 필요하지 않은 경우 해제하는 것이 좋습니다. mousemove
여기서, 마우스 포인터가 요소로 들어가면 마우스 포인터가 요소를 떠날 때 mousemove
가 실행됩니다. 두 번째 방법은 다음과 같습니다
hover
hover
<<> Codepen Demo <code class="language-javascript">$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$("img").attr("src", "image-src-here.jpg");
// 此处更改图像src。
}
});</code>
보기
handlerIn()
형태 이벤트 <🎜 🎜>
handlerOut()
<🎜 🎜> <<>, <code class="language-javascript">$(window).scroll(function() {
if ($(window).scrollTop() >= 500) {
$("#alert").text("您已经滚动足够了!");
// 更新警报框内的文本。
}
});</code>,
handlerInOut
이벤트가 트리거됩니다. 양식 요소 및 앵커 태그만으로 작동합니다. 다른 요소에 초점을 맞추려면 요소의
,
및 및
blur
요소에만 적용됩니다. 확인란, 라디오 버튼 및 선택 상자의 경우이 이벤트는 사용자가 선택한 직후에 트리거됩니다. 다른 요소에서는 요소가 초점을 잃은 후에 만 발사됩니다. 또한 JavaScript를 사용하여 입력 요소의 값을 변경하면이 이벤트가 트리거되지 않습니다. focus
select
요소에만 적용됩니다. 선택한 텍스트를 검색하려면 크로스 브라우저 jQuery 플러그인을 사용해야합니다. <input>
사용자가 양식을 제출하려고 할 때 <textarea></textarea>
이벤트가 트리거됩니다. 요소를 형성하기 위해 처리기 만 첨부 할 수 있습니다. 이 이벤트를 트리거하려면 사용자는 , 또는 요소를 클릭해야합니다. 흥미롭게도 JavaScript 이벤트는 Internet Explorer에서 거품이되지 않습니다. 그러나이 동작은 jQuery 버전 1.4 이후 브라우저에서 표준화되었습니다. submit
Codepen Demo <button></button>
<input type="submit">
보기
<input type="image">
의 변화
submit
메소드가 더 이상 사용되지 않았습니다.
이벤트에 대해 자세히 알아 보려면 공식 jQuery 문서에 액세스 할 수 있습니다. jQuery에서 이벤트 사용에 대한 질문이나 팁이 있으면 의견을 남겨주십시오.
jQuery 이벤트 (FAQ)의 FAQ
load
방법을 사용하여 이벤트가 DOM 트리의 위쪽으로 거품을 방지하지 못하게 할 수 있습니다. 이 방법은 이벤트가 부모 요소로 전파되는 것을 방지합니다. 기본 동작이 발생하는 것을 방해하지는 않습니다. 다음은 사용 방법의 예입니다.
error
unload에서 load()
방법의 차이점은 무엇입니까? load
jQuery의 및 error
메소드는 둘 다 이벤트 핸들러를 요소에 첨부하는 데 사용됩니다. 그들 사이의 주요 차이점은 jQuery.error()
가 핸들러를 현재 요소에만 첨부하는 반면 on
는 핸들러를 현재 요소와 미래의 선택기와 일치하는 모든 요소에 첨부한다는 것입니다. 그러나
메소드를 사용하여 jQuery에서 프로그래밍 방식으로 이벤트를 트리거 할 수 있습니다. 이 방법을 사용하면 요소에서 지정된 이벤트를 수동으로 트리거 할 수 있습니다. 예는 다음과 같습니다. .trigger()
<code class="language-javascript">$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 768) {
$("img").attr("src", "image-src-here.jpg");
// 此处更改图像src。
}
});</code>
메소드를 사용하여 jQuery에서 이벤트의 기본 작업을 차단할 수 있습니다. 이 메소드는 이벤트의 기본 작업이 발생하는 것을 방지합니다. 예를 들어, 링크가 URL을 따르는 것을 방지 할 수 있습니다.
의 차이는 무엇입니까?
event.preventDefault()
방법은 동적으로 추가 된 요소의 이벤트를 처리 할 수 있고 한 번에 여러 이벤트를 처리 할 수 있기 때문에 유연성이 향상됩니다. <code class="language-javascript">$(window).scroll(function() {
if ($(window).scrollTop() >= 500) {
$("#alert").text("您已经滚动足够了!");
// 更新警报框内的文本。
}
});</code>
메소드를 사용하여 jQuery에서 이중 클릭 이벤트를 감지 할 수 있습니다. 이 메소드는 선택한 요소에서 이중 클릭 이벤트가 발생할 때 실행되는 함수를 첨부합니다. 예는 다음과 같습니다.
메소드를 사용하여 여러 이벤트를 jQuery의 요소에 바인딩 할 수 있습니다. 이 방법을 사용하면 여러 이벤트 핸들러를 선택한 요소에 첨부 할 수 있습니다. 예는 다음과 같습니다. .click()
.on('click')
.click()
.on('click')
메소드를 사용하여 jQuery에서 이벤트 핸들러를 풀어 줄 수 있습니다. 이 메소드는 .on()
를 사용하여 첨부 된 이벤트 핸들러를 제거합니다. 예는 다음과 같습니다.
메소드를 사용하거나 이벤트에서 이벤트 객체의 "그"속성을 확인하여 jQuery에서 마우스 오른쪽 버튼 클릭 이벤트를 감지 할 수 있습니다. "Why"속성은 마우스 오른쪽 클릭으로 3입니다. 예는 다음과 같습니다.
위 내용은 jQuery의 이벤트를 포괄적으로 살펴 봅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!