JQuery(2)이벤트 메커니즘 초기 탐색(1)

물론 그 장점 은 이 점 뿐만 이 아니다.JQuery 사건 처리 체 제 를 사용 하 는 것 은 Javascript 자체 에 내 장 된 일부 사건 의 해당 방식 을 직접 사용 하 는 것 보다 더욱 유연 하고 외부 에 노출 되 기 쉽 지 않 으 며 더욱 우아 한 문법 을 사용 하여 우리 의 업무 양 도 를 크게 줄 였 다.
JQuery 의 이벤트 처리 메커니즘 은 페이지 불 러 오기,이벤트 귀속,이벤트 위임,이벤트 전환 네 가지 메커니즘 을 포함한다.우 리 는 먼저$(document).ready()이벤트 부터 시작 합 니 다.
1.페이지 로 딩$(document).ready()는 자바 script 의 onLoad()이벤트 와 비슷 합 니 다.모두 페이지 로 딩 할 때 이 방법 을 실행 합 니 다.그러나 두 가 지 는 미묘 한 차이 가 있 습 니 다.ready()이 벤트 는 HTML 다운로드 가 완료 되 고 DOM 트 리 로 해석 되면 실행 할 수 있 습 니 다.onLoad()이 벤트 는 HTML 포함 파일 을 모두 다운로드 한 후에 야 실 행 됩 니 다.우 리 는 ready()이벤트 에서 다른 이벤트 나 함 수 를 연결 할 수 있 습 니 다.ready()는 몇 가지 문법 으로 표시 할 수 있 습 니 다.
　　$(document).ready(function(){});
　　$().ready(function(){});
　　$(function(){});
물론 저 는 개인 적 으로 첫 번 째 로 가 독성 을 강화 하 는 데 익숙 합 니 다.주의해 야 할 것 은 ready()이 벤트 를 사용 할 때요소 의 onload 이벤트 에 등록 함수 가 없 는 지 확인 하 십시오.그렇지 않 으 면$(document).ready()이 벤트 를 촉발 하지 않 습 니 다.같은 페이지 에서$(document).ready()이 벤트 를 무한 정 사용 할 수 있 습 니 다.그 중에서 등 록 된 함 수 는(코드 중의)선착순 으로 순서대로 실 행 될 것 이다.
2.이벤트 전환 은 두 가지 방법 만 있 습 니 다.바로 hover()와 toggle()두 가지 방법 입 니 다.그들 은 조합의 사용자 조작 을 캡 처 하고 여러 함수 로 응답 하기 때문에 복합 이벤트 처리 체제 라 고도 부 릅 니 다.hover()방법 은 마우스 서 스 펜 션 변 화 를 모방 하 는 방법 입 니 다.쉽게 말 하면 마우스 가 이동 할 때 지정 한 행동 을 수행 하 는 방법 입 니 다.우리 가 가장 자주 사용 하 는 것 은 메뉴 전환 효 과 를 만 드 는 것 입 니 다.toggle()방법 은 지정 한 함수 방법 을 순서대로 실행 하려 면 첫 번 째 클릭 으로 첫 번 째 함 수 를 실행 하고 두 번 째 클릭 으로 두 번 째 함 수 를 실행 하 는 것 입 니 다.이 를 유추 하면 이벤트 바 인 딩 에 있 는 unbid(click)방법 으로 삭제 할 수 있 습 니 다.
hover(over,out)인 스 턴 스:

 
<style type="text/css"> 
#Menu 
{ 
background-color:Red; 
width:150px; 
height:30px; 
text-align:center; 
border:solid 1px black; 
} 
#Menu_child 
{ 
width:150px; 
border:solid 1px black; 
display:none; 
} 
#Menu_child div 
{ 
background-color:#f3f3f3; 
width:150px; 
height:30px; 
text-align:center; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
$("#Menu").hover( 
function() { 
$("#Menu_child").fadeIn(); 
}, 
function() { 
$("#Menu_child").fadeOut(); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="Menu">JQuery    </div> 
<div id="Menu_child"> 
<div>    </div> 
<div>    </div> 
<div>    </div> 
<div>    </div> 
</div> 
</body>

toggle(fn,fn)인 스 턴 스:

 
HTML   
<input type="button" value="toggle()  " id="toggle" /> 
JQuery   
$("#toggle").toggle( 
function() { 
alert("     "); 
}, 
function() { 
alert("     "); 
}, 
function() { 
alert("     "); 
}, 
function() { 
alert("     "); 
});

3.이벤트 위임 에 도 두 가지 방법 만 있 습 니 다.live()와 die()두 가지 방법 은 1.3 버 전에 서 추 가 된 것 입 니 다.이전 버 전 은 없습니다.live()는 요소 그룹 이벤트 위임 방법 으로 이해 할 수 있 습 니 다.예 를 들 어 li 요 소 는 live 로 click 사건 을 연결 합 니 다.그러면 나중에 li 를 이 페이지 에 추가 할 때 이 새로 추 가 된 li 에 대해 서 는 click 이 벤트 를 사용 할 수 있 습 니 다.새로 추 가 된 요소 바 인 딩 이 벤트 를 다시 주지 않 아 도 트 리 플러그 인 을 만 들 때 유용 합 니 다.die()방법 은 라 이브()바 인 딩 을 해제 하 는 방법 으로 설명 하기 쉽다.
live(type,fn):live()에서 type 인 자 는 현재 click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,keydown,keypress,keyup 이벤트 만 지원 합 니 다.인 스 턴 스 는 다음 과 같 습 니 다

 
HTML  ： 
<ul> 
<li>    </li> 
<li>    </li> 
<li>    </li> 
<li>    </li> 
</ul> 
JQuery  ： 
$("li").live('click', function() { 
var index = $("li").index(this);//  li    
var text = $("li").eq(index).text();//             
alert("  ：" + index + ",   ：" + text); 
});

die(type),[fn]:die()는 사용 하기에 상당히 간단 합 니 다.하 나 는 모든 live()이 벤트 를 삭제 하고 하 나 는 지정 한 삭제 이 며 두 개의 인 자 는 선택 할 수 있 습 니 다.

 
$("#die").click(function() { 
$("li").die(); //    live()   
$("li").die("click");//     click live()   
$("li").die('click', function() { alert("  live()    ") });//     click live()        
});

참고 로 관심 있 는 친구 들 이 토론 에 참여 하 는 것 을 환영 합 니 다.다음 글 에서 다시 이야기 하 자 면 사건 의 연결 이 너무 길다.미 완성 계속...

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

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

LFEX 이벤트 메커니즘 및 이벤트 등록 채널 인 스 턴 스

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

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

JQuery(2)이벤트 메커니즘 초기 탐색(1)

좋은 웹페이지 즐겨찾기