jquery 의 이벤트 처리 상세 소개

1.페이지 불 러 오기 완료 응답 이벤트 란 페이지 불 러 오기 완료 란 DOM 요소 불 러 오기 가 완료 되 어 읽 기 및 작업 이 가능 한 것 을 말 합 니 다.① jQuery 의$(doucument).ready()이벤트 ready(fn)는 jQuery 이벤트 모듈 에서 가장 중요 한 함수 입 니 다.이 방법 은 window.onload 등록 이벤트 에 대한 대체 방법 으로 볼 수 있다.이 방법 을 사용 하면 DOM 에서 불 러 올 때 바 인 딩 된 함 수 를 즉시 호출 할 수 있 으 며,거의 모든 자바 스 크 립 트 함 수 는 그 순간 에 실행 되 어야 합 니 다.ready(fn)반환 값:Object 인자-fn:DOM 이 불 러 올 때 실행 할 인자 Function 은 DOM 이 불 러 올 때 실행 할 함 수 를 연결 합 니 다.간단 한 줄 임 말 형식$(document).ready(function(){}=>$(function(){})② window.onload()이벤트 와$(document).ready()이벤트 의 비교 window.onload()=function(){}여러 window.onload 를 사용 하면()마지막 바 인 딩 함수 만 실 행 됩 니 다.앞의 모든 window.onload()바 인 딩 함 수 를 덮어 씁 니 다.여러 개의$()를 사용 하면 모두 실 행 될 수 있 습 니 다.주의해 야 할 것 은body 태그 의 onload 이벤트 가 특정한 함수 가 등록 되 어 있 으 면$()이벤트 에 등 록 된 함수 가 실행 되 지 않 습 니 다.2.바 인 딩 과 바 인 딩 이벤트 모니터 ① 바 인 딩 이벤트(1)bid(type,[data].fn)함 수 는 특정한 함수 와 특정한 요소 의 특정한 사건 을 연결 하 는 것 입 니 다$("\id").click(function(){})은 익명 함수 와 id 요소 의 click 사건 을 묶 는 것 입 니 다.그러나 위의 예 는 줄 임 말 형식 일 뿐 입 니 다.간단 하고 자주 사용 하 는 이벤트 바 인 딩 이기 때문에 정규 표기 법 은 다음 과 같 아야 합 니 다.$("\id").bid("click",[data],function(){})bid(type,[data].fn)반환 값:Object 파라미터-type:이벤트 유형 String data:선택 할 수 있 습 니 다.event.data 속성 값 으로 뒤에 fn 의 실제 인삼 Object fn 에 전달 할 수 있 습 니 다.이벤트 에 연 결 된 함수 Function(2)처리 함수 전달 매개 변 수 를 위해 bid()함수 의 두 번 째 매개 변수 와 event.data 속성 은 fn 함수 전달 매개 변수

 
<input id="Text2" type="text" /> 
$("#Text2").bind("click",{first:"1",second:"2"},function(event){ 
if(event.data.first=="1"){$(this).val("    ")} 
if(event.data.second=="1"){$(this).val("")} 
}); 
}) 

두 번 째 매개 변 수 는 json 대상 입 니 다.fn 함수 에서 event.data 를 통 해 키 이름 을 통 해 매개 변수 값 ⑶ 를 얻 습 니 다.브 라 우 저의 기본 행동 을 막 으 려 면 bind 바 인 딩 함수 가 브 라 우 저의 기본 동작 과 충돌 할 때 가 있 습 니 다.이때 브 라 우 저의 기본 동작 을 막 으 려 면 fn 뒤에 return false 를 추가 하 십시오.

 
$("form").bind("submit",function(){return false;}) 

② 반 바 인 딩 이 벤트 는 특정한 요소 의 특정한 이벤트 와 연결 되 어 있 는 함수 unbid([type],[fn 명])의 반환 값 을 해제 하 는 것 입 니 다.Object 파라미터-type:이벤트 유형 String fn 명:바 인 딩 이 해 제 될 함수 명 Function 이상 의 두 매개 변 수 는 모두 선택 가능 한 매개 변수 입 니 다.매개 변수 가 비어 있 으 면,요소 와 일치 하 는 모든 이벤트 에 연 결 된 함수

 
$(function(){$("#btn1").click(function(){ 
$("input[type=text]").unbind()}) 
}) 

를 제거 하고 btn 1 을 누 르 면 type=text 텍스트 상자 로 연 결 된 모든 이벤트 에 연 결 된 모든 함수 ③ 일회 성 이벤트 바 인 딩 은 특정한 요소 의 특정한 이벤트 에 연 결 된 함수 로 원(type,[data],fn)반환 값 을 한 번 만 실행 할 수 있 습 니 다:Object 파라미터-type:이벤트 형식 String data:선택 할 수 있 습 니 다.이벤트.data 속성 값 으로 다음 fn 에 전 달 된 실제 참조 Object fn:이벤트 에 연 결 된 함수 Function 은 bid()함수 와 일치 합 니 다.다른 점 은 one 의 fn 이 한 번 만 실 행 될 수 있다 는 것 입 니 다.3.이벤트 트리거 상기 바 인 딩 된 일부 함 수 는 사용자 가 일정한 작업 을 수행 해 야 실 행 됩 니 다.예 를 들 어 click 이벤트 바 인 딩 함 수 는 사용자 가 해당 요 소 를 눌 러 야 실 행 됩 니 다.그러나 이벤트 트리거 는 코드 로 사용자 의 조작 동작 을 모 의 하여 이벤트 에 연 결 된 함 수 를 실행 할 수 있 으 며 사용자 가 어떤 조작 을 하지 않 아 도 됩 니 다.trigger(type,[data])반환 값:Object 인자-type:이벤트 형식 String data:선택 가능,트리거 된 이벤트 에 연 결 된 함수 에 전 달 된 실제 인삼 Array(javascript 배열)는 일치 하 는 요 소 를 가 진 특정한 이벤트 에 연 결 된 모든 함 수 를 촉발 합 니 다.이러한 이벤트 가 브 라 우 저의 기본 동작 과 충돌 할 때 이 이벤트 트리거 는 브 라 우 저의 기본 동작

 
<input id="Text1" type="text" value="     " /> 
<input id="Text2" type="text" /> 
$(function(){$("#Text1").bind("click",function(){$(this).val("")})}) 
$(function(){$("#Text2").click(function(event,pamas1,pamas2) 
{$(this).val("trigger     "+pamas1+pamas2)}) 
}) 
$(function(){$("input[type=text]").trigger("click",["1","2"])}) 

을 수행 합 니 다.예 를 들 어 두 텍스트 상자 의 클릭 이벤트 에 함수 가 연결 되 어 있 지만 마지막 코드 도 이 두 텍스트 상자 의 클릭 이벤트 에 트리거 를 설정 합 니 다.따라서 사용자 가 해당 텍스트 상 자 를 누 르 지 않 아 도 이벤트 에 연 결 된 함 수 를 실행 할 수 있 습 니 다.또한 이 트리거 는 트리거 함수 에 파 라 메 터 를 전달 합 니 다.자바 script 배열 로 Text 2 의 클릭 함수 에서 파 라 메 터 를 볼 수 있 습 니 다.trigger 함수 가 실행 하 는 이벤트 가 브 라 우 저의 기본 동작 과 충돌 할 때 이 이벤트 트리거 는 브 라 우 저의 기본 동작 을 수행 하고 trigger Handler 함 수 는 브 라 우 저의 기본 동작 을 수행 하지 않 습 니 다.trigger Handler(type,[data])는 trigger 의 사용 과 일치 합 니 다.이벤트 의 상호작용 처리 ① hover:마우스 서 스 펜 션 hover(over,out)의 반환 값 을 모방 합 니 다.Object 파라미터-over:마우스 가 요소 로 이동 하여 촉발 하 는 함수 Function out:마우스 가 요 소 를 이동 하여 촉발 하 는 함수 Function

 
<input type="text" id="hover1" /><span id="hoverpd" style="display:none;">      </span> 
$(function(){$("#hover1").hover(function(){ 
$("#hoverpd").show();},function(){ 
$("#hoverpd").hide();}) 
}) 

② toggle:여러 번 클릭 한 순환 응답 은 일치 하 는 요소 의 클릭 이벤트 에 많은 바 인 딩 함 수 를 추가 합 니 다.이 함수 들 은 이 요 소 를 계속 누 르 면서 toggle(fn1,fn2,fn3...)반환 값 을 반복 합 니 다:Object 파라미터-fn1,fn2,fn3...순환 할 함수 Function

 
<input type="button" id="toggle1" value="toggle"/> 
var i=0; 
$(function(){$("#toggle1").toggle(function(){i++;$("#hover1").val(i)}, 
function(){i=i+2;$("#hover1").val(i)}) 
}) 

5.jQuery 내 장 된 이벤트 유형 ① jQuery 내 장 된 이벤트 함수 의 두 가지 성명 방식 에 매개 변수 가 없 는 이벤트 함수-이벤트 유형 명()은 사용자 의 조작 대 매개 변수의 이벤트 함수-이벤트 유형 명(이벤트 함수)$($("\#id").click(function(){})매개 변수 가 있 는 이벤트 함수$($("\#id").click(function(){});$("\#id")id").click();) 매개 변수 가 없 는 이벤트 함수-\#id 를 누 르 지 않 아 도 해당 함 수 를 실행 합 니 다.즉,사용자 작업 ② jQuery 내 장 된 이벤트 유형 분류(1)브 라 우 저 관련 이벤트 error(fn)일치 요소 가 잘못 되 었 을 때 특정한 함 수 를 촉발 합 니 다.error 사건 은 표준 이 없습니다.예 를 들 어 이미지 src 가 잘못 되 었 을 때 이미지 의 error 이벤트 load(fn)일치 요 소 를 불 러 온 후에 특정한 함 수 를 촉발 합 니 다.예 를 들 어 window 는 모든 DOM 대상 이 불 러 와 야 촉발 합 니 다.다른 단일 요 소 는 하나의 요 소 를 불 러 온 후에 unload(fn)resize(fn)일치 요 소 를 촉발 하여 큰 시간 에 특정한 함수 scroll(fn)스크롤 바 가 변 할 때 촉발 합 니 다(2 폼 관련 이벤트 change(fn)는 일치 요소 가 초점 을 잃 었 을 때 촉발 합 니 다.요소 가 초점 을 맞 춘 후에 select(fn)를 터치 합 니 다.사용자 가 텍스트 상자 에서 특정한 문 자 를 선택 할 때 submit(fn)가 폼 을 제출 할 때 ⑶ 키보드 조작 관련 이벤트 keydown(fn)키 보드 를 누 를 때 keypress(fn)키 보드 를 누 르 고 튕 길 때 트리거 순 서 는 keydown->keypress->keypress keyup(fn)키보드 가 튕 길 때 트리거(4)마우스 조작 관련 이벤트 click(fn)순서 입 니 다.mousedown->mouseup->click mousedown(fn)mouseup(fn)dblclick(fn)mouseover(fn)mouseout(fn)mousemove(fn)가 일치 하 는 요소 에서 이동 할 때 촉발 되 며,이벤트 처리 함 수 는 하나의 변수 인 이벤트 대상(clientX,clientY 속성 은 마우스 좌 표를 대표 합 니 다)⑥ 인터페이스 에 관련 이벤트 blur(fn)일치 요소 가 초점 을 잃 었 을 때 터치 합 니 다.마우스 로 도 Tab 키 focus(fn)를 표시 할 수 있 습 니 다.