JQuery에 대한 첫 번째 살펴보기(2) 이벤트 메커니즘(1)_jquery

물론 그 장점은 이것에만 국한되지 않습니다. JQuery 이벤트 처리 메커니즘을 사용하는 것은 Javascript 자체에 내장된 일부 이벤트 응답 메서드를 직접 사용하는 것보다 더 유연하고 노출될 가능성이 적으며 더 우아한 구문을 갖습니다. 우리 작업의 규모가 크게 줄어듭니다.

JQuery의 이벤트 처리 메커니즘에는 페이지 로딩, 이벤트 바인딩, 이벤트 위임, 이벤트 전환이라는 네 가지 메커니즘이 포함됩니다. $(document).ready() 이벤트부터 시작해 보겠습니다.

　 1. 페이지 로딩 $(document).ready()는 Javascript의 onLoad() 이벤트와 동일합니다. 이 메소드는 페이지가 로드될 때 실행되지만 둘 사이에는 미묘한 차이가 있습니다. . 의 경우, HTML 다운로드가 완료되어 DOM 트리로 구문 분석된 후에 Ready() 이벤트가 실행될 수 있지만, onLoad() 이벤트는 HTML 포함 파일이 다운로드될 때까지 실행될 수 없습니다. Ready() 이벤트에 다른 이벤트나 함수를 바인딩할 수 있습니다. Ready()에 대한 구문은 여러 가지가 있습니다.

　$(document).ready(function(){});

　$().ready(function(){});

　$(function(){});

물론 저는 개인적으로 가독성을 높이기 위해 첫 번째 방법을 사용하는 데 여전히 익숙합니다. 주의해야 할 점은 Ready() 이벤트를 사용할 때 onload 이벤트가 없는지 확인하십시오. 요소에 함수를 등록하세요. 그렇지 않으면 $(document).ready() 이벤트가 트리거되지 않습니다. 동일한 페이지에서 $(document).ready() 이벤트를 무제한으로 사용할 수도 있습니다. 등록된 기능은 (코드 내에서) 순서대로 실행됩니다.

　2. 이벤트 전환에는 hover()와toggle() 두 가지 메소드만 있는데, 이는 결합된 사용자 작업을 가로채서 여러 함수로 응답하므로 복합 이벤트 처리 메커니즘. hover() 메소드는 마우스 호버 변경을 모방하는 메소드입니다. 간단히 말하면 마우스가 들어오고 나갈 때 지정한 동작을 실행하는 메소드입니다. 가장 일반적으로 사용되는 메소드는 메뉴 전환 효과를 만드는 것입니다. Toggle() 메서드는 클릭할 때 지정한 함수 메서드를 순서대로 실행하는 것입니다. 첫 번째 클릭은 두 번째 함수를 실행하는 식으로 이벤트 바인딩에서 unbind를 사용할 수 있습니다. ') 메소드를 삭제합니다.

　hover(over,out) 인스턴스: 　

스크립트 언어= "javascript" type="text/javascript">
$(document).ready(function() {
$("#Menu").hover(
function() {
$ ("#Menu_child").fadeIn();
},
function() {
$("#Menu_child").fadeOut()
});

JQuery 이벤트 처리
< ;div id="Menu_child">

페이지 로딩

이벤트 바인딩

이벤트 위임

이벤트 토글

toggle(fn,fn) 예:




코드 복사

코드는 다음과 같습니다.

HTML 코드 JQuery 코드$("#toggle").toggle( function() { alert("첫 번째 클릭" ); },

function() {

alert("두 번째 클릭");
},
function() {
alert("세 번째 클릭" ); ,
function() {
alert("네 번째 클릭")


3. 이벤트 위임 live(), die() 두 가지 메소드만 있습니다. 이 두 메소드는 1.3 버전 이후에 추가되었으며 이전 버전에서는 사용할 수 없었습니다. live()는 요소 그룹 이벤트 위임 방법으로 이해될 수 있습니다. 예를 들어 li 요소는 클릭 이벤트를 바인딩하기 위해 live를 사용합니다. 그러면 나중에 이 페이지에 li가 추가되면 새로 추가된 요소에 이벤트를 다시 바인딩할 필요 없이 새로 추가된 li의 클릭 이벤트를 계속 사용할 수 있습니다. 이는 트리 플러그인을 작성할 때 매우 유용합니다. . die() 메소드는 설명하기 쉽습니다. live()를 바인딩 해제하는 데 사용되는 메소드입니다.

　live(type,fn):live()의 유형 매개변수는 현재 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, 키업 이벤트. 예시는 다음과 같습니다

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

HTML 코드:

• 페이지 로드


• 이벤트 바인딩
;

• 이벤트 전환

JQuery 코드:
$("li").live('click', function() {
var index = $("li").index(this);//li 인덱스 가져오기
var text = $("li").eq(index).text();//에 따르면 클릭한 항목 인덱스 텍스트 값 가져오기
alert("index: " index ", text value: "
})

die([type],[fn] ):die( )는 사용이 매우 간단합니다. 하나는 모든 live() 이벤트를 삭제하는 것이고, 다른 하나는 삭제를 지정하는 것입니다.

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

$("#die").click (function( ) {
$("li").die(); //live() 이벤트 모두 삭제
$("li").die("click"); //live() 삭제 )는 click으로 지정됨 )Event
$("li").die('click', function() { Alert("Delete live() event 성공적으로") });//다음으로 지정된 live() 이벤트 삭제
}) 기능을 클릭하여 실행하세요.

참고용으로 관심 있는 친구들의 토론 참여를 환영합니다. 다음 글에서는 이벤트 바인딩에 대해 다룰 예정인데, 함께 쓰기에는 너무 길어질 것 같습니다. 계속하려면 ...