jQuery 처리 페이지에 대한 자세한 설명 events_jquery

이벤트 처리에 JavaScript를 도입하는 방법은 이전 DOM 작업에서 언급한 바 있습니다. 브라우저마다 이벤트를 다르게 처리하므로 개발자에게 불필요한 문제가 발생하므로 jQuery는 이러한 문제를 편리하게 해결합니다.

1.바인드 이벤트 모니터링

(http://www.jb51.net/article/60096.htm)에서는 이벤트 모니터링에 대해 자세히 소개하고 이벤트 모니터링 처리에 있어서 iE와 DOM 표준 브라우저의 차이점을 살펴보았습니다. 여러 청취 이벤트를 실행하는 순서와 방법도 다릅니다.

jQuery에서 바인딩()을 통한 이벤트 바인딩은 IE 브라우저의 attachmentEvent() 및 표준 DOM의 addEventListener()와 동일합니다. 아래 예:

코드 복사 코드는 다음과 같습니다.

");
                     })
                   .bind("클릭", function() {
을 통해                      });
            });
>
                                   
~ ~

위 코드는 세 개의 클릭 청취 이벤트를 img에 바인딩합니다.

bind() 일반 구문은

입니다.

바인드(이벤트 유형,[데이터],리스너) 그 중 eventType은 이벤트의 종류로, Blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown이 가능합니다. /keypress/키업/오류

data는 청취 기능에서 사용할 일부 특수 데이터를 전달하는 데 사용되는 선택적 매개변수입니다. 리스너는 이벤트 수신 함수입니다. 위의 예에서는 익명 함수가 사용되었습니다.

여러 이벤트 유형의 경우 동일한 청취 기능을 사용하려면 동시에 eventType에 추가하고 공백을 사용하여 이벤트를 구분할 수 있습니다.

코드 복사

코드는 다음과 같습니다. $(함수() {                      $("p").bind("mouseenter mouseleave", function() {

$(this).toggleClass("over")

                 })
            });



다른 특수 이벤트 유형 중 일부는 이벤트 이름을 바인딩 함수로 직접 사용하고 매개변수를 청취 함수로 허용할 수 있습니다. 예를 들어 이전에 반복적으로 사용되었던

코드 복사

코드는 다음과 같습니다.

$("p").click(function(){
//클릭 이벤트 청취 기능 추가
            })

그 중 일반적인 구문은

이벤트유형이름(fn)
사용 가능한 eventTypeName에는

이 포함됩니다.

흐림/초점/로드/크기 조정/스크롤/언로드/클릭/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
키다운/키누르기/키업/오류 등

bind() 외에도 jQuery는 이벤트를 바인딩하는 매우 실용적인 one() 메서드도 제공합니다. 이 메서드는 한 번 바인딩된 후 자동으로 삭제되며 더 이상 적용되지 않습니다.

코드 복사 코드는 다음과 같습니다.

//먼저 10개의

블록을 만듭니다
for (var i = 0; i                        $(document.body).append($("

클릭
Me!

"));
            var iCounter = 1;
//각각에 하나씩 클릭 이벤트를 추가합니다
                $("div").one("클릭", function() {
                     $(this).css({
배경: "#8f0000",
색상: "#FFFFFF"
                   }).html("클릭했습니다!
" (iCounter));
            });

예를 들어 위의 예에서는 div를 10개 생성하고 각 div에 함수 이벤트를 바인딩합니다. div 블록을 클릭하면 함수가 한 번 실행되고 더 이상 실행되지 않습니다.

2. 이벤트 리스너 제거

jQuery는 이벤트를 제거하기 위해 unbind()를 사용합니다. 이 메소드는 두 가지 선택적 기능을 허용하거나 매개변수를 설정할 수 없습니다. 예를 들어 다음 코드는 div 태그의 모든 이벤트와 P 태그의 모든 클릭 이벤트를 제거한다는 의미입니다.

코드 복사 코드는 다음과 같습니다.

$("p").unbind("클릭");
                $("div").unbind();

지정된 이벤트를 제거하려면 unbind(eventType, Listener) 메소드의 두 번째 매개변수를 사용해야 합니다. 예:

코드 복사 코드는 다음과 같습니다.

var myFunc = function() {
//듣기 함수 본문
            };
                $("p").bind("click",myFunc);
               $("p").unbind("click",myFunc);

예를 들어 다음 코드는

코드 복사 코드는 다음과 같습니다.

");
                     })
                   .bind("클릭", function() {
을 통해                      });
                        $("input[type=button]").click(function() {
~                                                                      $("img").unbind("click", fnMyFunc1); //이벤트 제거 myFunc1
                });
            });
>                              
         
​​​​
~ ~


예를 들어 위 코드에서는 fnMyFunc1 함수인 bind()를 추가하고 여기에 바인딩할 때 익명 함수를 할당하여 unbind() 함수 호출 이름으로 사용합니다.

3. 이벤트 객체를 전달합니다.

http://www.jb51.net/article/60096.htm객체의 개념을 소개하고, 이벤트 객체의 일반적으로 사용되는 속성과 메소드를 분석한 것을 볼 수 있습니다. 다른 브라우저에서는 타이머 간에 많은 차이점이 있습니다. jQuery에서는 시간 객체가 이벤트 리스너 함수에 유일한 방식으로 전달되지 않습니다.

코드 복사

코드는 다음과 같습니다.                 $(function() {

$ ("P"). 바인딩 ("클릭", 함수 (e) {// 이벤트 객체 E

전달                     var sPosPage = "(" e.pageX "," e.pageY ")";
                var sPosScreen = "(" e.screenX "," e.screenY ")";
                                    $("span").html("
Page: " sPosPage "
Screen: " sPosScreen);
                });
            });
>             

여기를 클릭하세요

                                                                               

위 코드는 마우스 클릭 이벤트 수신 함수를 p에 바인딩하고 이벤트 객체를 매개변수로 전달하여 마우스 이벤트 트리거 지점의 좌표값을 가져옵니다.

이벤트 속성 및 메소드의 경우 jQuery의 가장 중요한 작업은 개발자가 일반적으로 사용하는 속성 및 메소드의 호환성 문제를 해결하는 것입니다.

속성 설명
altKey Alt 키를 누르면 true, 그렇지 않으면 false
ctrlKey Ctrl 키를 누르면 true, 그렇지 않으면 false
ShiftKey Shift 키를 누르면 true, 그렇지 않으면 false
keyCode keyup 및 keydown 이벤트의 경우 키 값을 반환합니다(즉, a와 A의 값은 동일하며 둘 다 65입니다)
pageX, pageY 도구 모음, 스크롤 막대 등을 제외한 클라이언트의 마우스 위치
관련타겟
마우스 이벤트는 마우스 포인터가 요소에 들어오거나 나갈 때 발생합니다.

screenX, screenY 전체 화면에서의 마우스 위치입니다.
target 이벤트를 발생시킨 요소/객체
type 클릭, 마우스 오버 등 이벤트 이름
어떤 키보드 이벤트는 버튼의 유니코드 값을 나타내고, 마우스 버튼은 마우스 버튼을 나타냅니다(왼쪽 버튼 1개, 가운데 버튼 2개, 오른쪽 버튼 3개)
stopPropagation()은 이벤트가 위쪽으로 버블링되는 것을 방지합니다.
PreventDefault()는 이벤트 기본 동작을 방지합니다

위 내용은 이 기사의 전체 내용입니다. 모두가 좋아하길 바랍니다.