JQuery Knowledge 2 – 이벤트

28986 단어 jquery

이벤트는 스크립트 언어의 핵심이다.JQuery가 지원하는 이벤트와 사용자 정의 이벤트를 소개합니다.
JQuery 내장 이벤트
1. Document 로드 이벤트
JQuery는 ready, load, unload 세 개의 Document 로드 이벤트를 제공합니다.load와 unload 사건은 1.8판부터 사용에 찬성하지 않았습니다.ready는 우리가 가장 많이 사용한 사건이라고 할 수 있습니다.이것은 가장 특별한 이벤트입니다. 모든 JQuery 문장의 실행은ready 이벤트에서 시작됩니다.일반적으로 이 이벤트의 응답 함수에 다른 응답 함수, 실행 코드 등을 연결한다.
자바스크립트의load 이벤트에 비해ready 이벤트가 더 좋다. 왜냐하면load 이벤트는 한 페이지의 모든 자원, 예를 들어 그림 등을 다운로드한 후에 발생하고ready 이벤트는DOM 다운로드가 완료된 후에 발생하기 때문이다.
다음과 같은 여러 가지 용도가 있습니다.

$( document ).ready( handler )

$().ready( handler ) (this is not recommended)

$( handler )

ready 이벤트를 사용할 때 다음과 같은 네 가지를 주의해야 한다
1)ready 함수의 위치: 스크립트가 CSS 속성에 의존하는 경우 css 파일을 도입한 후 스크립트 파일을 도입해야 하며, 스크립트가 자원에 의존하는 경우load 이벤트를 사용해야 합니다.
2) 속성과 JQuery의ready,load 이벤트가 충돌하므로 함께 사용하지 마십시오.
3)사용하지 마십시오.대신 on("ready",handler)을 사용합니다.ready 함수.
4)$다른 라이브러리의 정의와 충돌할 경우 다음과 같은 형식으로 코드를 쓸 수 있습니다.

jQuery( document ).ready(function( $ ) {

// Code using $ as usual goes here.

});

2. 마우스 이벤트
click
dblclick
mousedown
mouseup
mousemove
mouseenter
mouseleave
mouseover
mouseout
hover
참고 사항:
1) 같은 요소에 클릭과dblclick 이벤트의 응답 함수를 동시에 추가하지 않는 것이 좋다. 이 두 이벤트의 구분에 어느 정도 어려움이 있을 수 있기 때문이다.
2)mouseenter,mouseleave와mouseover,mouseout의 차이점은 마우스가 원소로 이동하거나 원소를 떠날 때 조상 노드도 mouseover나mouseout 이벤트를 받지만 mouseenter나mouseleave 이벤트는 받지 않기 때문에mouseenter와mouseleave를 추천합니다.
3) hover는 mouseenter,mouseleave의 조합이다.

3. 키보드 이벤트
keydown
keyup
keypress
참고 사항:
1) 키보드 이벤트는 현재 초점 요소에만 발송됩니다. form은 항상 초점을 얻을 수 있기 때문에 이벤트를 form에 귀속시킵니다. 단축키를 실현하려면 이벤트를document에 귀속시킬 수 있습니다.
2) 텍스트를 입력할 때는 키press를 사용하고, 단축키를 사용할 때는 키다운, 키up을 사용한다.

4. 양식 이벤트
focus
blur
focusin
focusout
change
select
submit
참고 사항:
1)focusin,focusout과focus,blur의 차이점은 어떤 원소가 초점을 얻거나 잃을 때 그 조상 노드도 focusin이나focusout 메시지를 받고 focus나blur 메시지를 받지 않는다는 것이다.
2) 선택 상자 등 요소는 사용자가 선택하면change 이벤트를 터치하고

등 요소는 초점을 잃을 때change 이벤트를 터치할 수 있습니다. 3) select 이벤트는 <input type="text">와 <textarea>의 텍스트 선택 작업에만 적용됩니다. 텍스트의 삽입점을 설정하면 select 이벤트가 발생하지 않으며 웹 페이지의 정적 텍스트를 선택해도 select 이벤트가 발생하지 않습니다.   5. 브라우저 이벤트 resize: 브라우저 창의resize 이벤트입니다. 한 번의resize 창의 동작이 여러 개의resize 이벤트를 일으킬 수 있습니다. scroll: 브라우저 창, 스크롤 가능한 프레임, 스크롤 속성이 있는 요소는 모두 스크롤 이벤트를 생성할 수 있습니다 error:1.8 버전부터 사용을 찬성하지 않습니다.   JQuery 이벤트 함수 JQuery는 모든 이벤트에 대해 최소한 두 버전의 이벤트 함수를 정의했다. 클릭 이벤트의 경우 JQuery는 두 가지 함수를 정의했는데 모두 클릭이라고 한다. 매개 변수가 다르다. 한 함수는 함수를 매개 변수로 하고 이벤트 처리 함수를 귀속시키는 데 사용하며 다른 함수는 매개 변수가 필요하지 않아 이벤트를 촉발하는 데 사용한다.예컨대<pre><code>#("button").click(function(){

//do things when button clicked.

});</code></pre> <pre><code>$("button").click();//trigger click event</code></pre> 어떤 트리거 이벤트의 함수, 예를 들어 select는 심지어 select 행위를 일으키고 호출할 수 있다.select () 는 현재 요소의 모든 텍스트를 선택할 수 있습니다. 이벤트 처리 함수에서는 이벤트의 데이터를 매개 변수로 가져올 수 있고 $(this)로 트리거 이벤트의 대상을 가져올 수 있습니다.다음은 간단한 예를 하나 보겠습니다.<pre><code><!doctype html>

<head>

<title>click demo</title>

<style>

div {

float: left;

}

</style>

</head>

<body>

<div>

<ul>

<li>click me</li>

</ul>

</div>

$("ul li").click(function(event){

$(this).html("Mouse clicked at pos:"+event.pageX+","+event.pageY);

});

</script>

</body>

</html></code></pre>   JQuery 이벤트 객체 위의 예에서 우리는 이벤트 대상의 속성을 사용했다. 다음은 이벤트 대상이 어떤 속성(일부 개인이 중요하게 생각하는 속성, 미비)을 가지고 있는지 간단하게 살펴보자. target currentTarget(권장하지 않음) 주의:this와currentTarget는 귀속 이벤트의 대상이고delegated 이벤트에 대해서는 selector가 일치하는 요소입니다.target은 진정으로 메시지를 촉발하는 대상이다.target은currentTarget 객체 또는 그 하위 노드입니다. relatedTarget는 관련 대상을 가져옵니다. 예를 들어mouseleave 이벤트에 대해 관련 대상은mouseenter 이벤트를 가져옵니다. 주의: target,currentTarget,relatedTarget,this는 모두 DOM 요소입니다. $를 사용하여 JQuery가 조작할 수 있는 대상으로 전환해야 합니다. 예를 들어<pre><code>$(event.currentTarget).css("background-color","red");</code></pre> pageX pageY which mousedown과mouseup 이벤트에 있어 1은 왼쪽 키, 2는 중간 키, 3은 오른쪽 키를 나타낸다 키보드 이벤트의 경우 해당 ASCII 코드 altKey ctrlKey shiftKey metaKey type 데이터: 데이터 전송 방식은.click( [eventData ], handler(eventObject) )   JQuery의 이벤트 실행 프로세스 하나의 이벤트가 트리거되면 JQuery는 먼저 이벤트를 트리거하는 요소에 해당하는 메시지 처리 함수가 귀속되어 있는지 확인하고 있으면 메시지 처리 함수의 귀속 순서에 따라 실행한다. 이 요소의 이벤트가 모두 처리된 후에 이 이벤트가 거품 이벤트라면 그 부모 노드에 거품이 생기는 과정을 차례로 진행하고 부모 노드를 계속 검사한다.부모 노드의 부모 노드...마지막으로 이 메시지의 기본 응답 동작을 실행합니다. 이벤트 대상에 대해 일정한 조작을 실행함으로써 이 절차를 바꿀 수 있다. event.preventDefault();메시지의 기본 응답 동작을 금지할 수 있습니다. event.stopImmediatePropagation();다음 메시지 처리 함수와 거품 프로세스를 금지하고 기본 응답 행위를 금지하지 않습니다. event.stopPropagation();이후의 메시지 처리 함수와 기본 응답 행위는 금지되지 않지만, 거품 과정은 금지됩니다. 함수에서returnfalse;효과 및 이벤트preventDefault()+event.stopPropagation()과 같습니다.return false의 함수를 직접 false로 대체할 수도 있습니다. 다음과 같습니다.<pre><code><!doctype html>

<head>

<style>

div {

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

$("li").click(false);

</script>

</body>

</html></code></pre>   다음 세 함수는 상기 세 함수가 이미 집행되었는지 각각 판단한다. event.isDefaultPrevented()event.isImmediatePropagationStopped()event.isPropagationStopped()   사용자 지정 이벤트 어떤 경우, 당신은 자신의 이벤트를 맞춤형으로 만들어야 할 수도 있습니다. 다음은 JQuery 홈페이지에서 제시한 간단한 예입니다.<pre><code>$( "#foo" ).on( "custom", function( event, param1, param2 ) {

alert( param1 + " " + param2 );

});

$( "#foo").trigger( "custom", [ "Custom", "Event" ] );</code></pre> 사용자 정의 데이터를 사용하지 않으려면 간단하게 이렇게 쓰십시오<pre><code>$( "#foo" ).on( "custom", function() {

alert("custom event happened");

});

$( "#foo").trigger( "custom");</code></pre>   이벤트 승급 앞에서 우리는 on으로 사용자 정의 이벤트를 연결하고 trigger로 이 사용자 정의 이벤트를 촉발하는 것을 보았다. 사실 JQuery는 이벤트의 귀속과 촉발에 더욱 복잡한 처리 방법을 제공했다. 다음은 우리가 배워보자.  1.이벤트 트리거 JQuery는 trigger와 triggerHandler 두 가지 트리거 이벤트의 함수를 제공합니다. .trigger는 선택기의 모든 요소에 이벤트를 터치하고 이벤트는 거품 처리를 하지만 이벤트의 기본 동작을 일으키지 않습니다. .triggerHandler는 선택기의 첫 번째 요소에 이벤트만 터치하고 이벤트는 거품 처리를 하지 않으며 이벤트의 기본 동작을 일으키지 않습니다. 또 두 함수의 반환값도 다르다. 2. 이벤트 처리 함수의 귀속과 귀속 1.7 버전에서는 이벤트 처리 함수의 귀속과 귀속을 위해 온과 오프 두 함수를 추가했다. 이 두 함수는 기본적으로 기존의bind, unbind와delegate,undelegate 기능을 대체했기 때문에 현재 JQuery 정부는 온과 오프로 다른 두 함수를 대체하는 것을 추천한다. 1) on은 두 가지 형식이 있다 .on( events [, selector ] [, data ], handler(eventObject) ).on( events [, selector ] [, data ] ) 그 중에서 두 번째 형식의 매개 변수 이벤트는 이벤트 문자열과 상응하는 처리 함수의 수조일 수 있다. 개인은 이런 형식을 좋아하지 않기 때문에 어지러워 보이기 때문에 온을 몇 개 더 쓰는 것이 낫다고 생각한다. selector를 제공하지 않을 때, 직접 귀속 모드로 이벤트가 귀속된 대상에게 전달될 때 터치됩니다. selector를 제공할 때 프록시 귀속 모드로 이벤트가 귀속된 대상에게 전달될 때 거품이 발생하는 과정에서 selector 조건을 충족시키는 요소가 존재하는지 확인하고 있으면 촉발되고 없으면 촉발되지 않습니다. 왜 대리 귀속 모드가 필요합니까?프록시 바인딩 모드가 필요한 시나리오는 다음과 같습니다. a. 이벤트 귀속을 진행할 때 귀속된 대상이 이미 존재해야 하기 때문에 동적 가입 요소에 대해 대리 귀속 모드로 이벤트를 이미 존재하는 가장 가까운 조상 노드에 귀속시킬 수 있다. b. 모 부모 노드 아래에 여러 개의 노드가 같은 이벤트에 응답해야 한다.이 때 프록시 귀속 모드를 사용하면 효율을 높일 수 있습니다.<pre><code><!doctype html>

<head>

<style>

div {

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

$("ul").on("click",$("a"),function(){

alert("a is clicked");

});

$("li").click(function(){

alert("li is clicked");

});

</script>

</body>

</html></code></pre>   2)off 함수와 on 함수는 상대적으로 두 가지 형식이 있고 직접 귀속과 대리 귀속 두 가지 모델을 지원한다. JQuery는 이벤트 이름, 공간, 선택기, 이벤트 처리 함수의 조합 조건에 따라 이벤트 연결을 삭제하는 다양한 편리한 방법을 제공합니다.   3) 원 함수, 메시지 귀속은 한 번만 터치하면 제거됩니다.특히 프록시 귀속 모드에서는 이벤트가 귀속 대상에게 전달되면 터치되든 안 되든 메시지 귀속을 제거합니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

jQuery 전후 예

이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jquery 선택기 엔진 sizzle 분석

jQuery에서 자주 사용하는 개발 기술 (1)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다