Script

JQuery Events

하가령 2009. 3. 16. 14:11

Event Type 종류 - focus, blur, click, dblclick, change, error, load, unload, scroll, select, resize, submit, reset, keyup, keydown, keypress, mouseout, mouseover, mouseup, mousedown, mousemove 등

*** Event 객체 속성 ***
altKey - altKey 가 눌렸을 때 true 를 리턴
ctrlKey - ctrlKey 가 눌렸을 때 true 를 리턴
KeyCode - Key 가 눌렸을 때 발생, 대문자에 해당하는 ASCII 코드를 리턴
metaKey - ctrlKey 와 같은 metaKey 가 눌렸을 때 true 를 리턴
pageX(clientX) - Mouse event 이며, page(브라우저)를 기준으로 수평 좌표를 리턴
pageY(clientY) - Mouse event 이며, page(브라우저)를 기준으로 수직 좌표를 리턴
screenX - Mouse event 이며, Screen 을 기준으로 수평의 좌표를 리턴
screenY - Mouse event 이며, Screen 을 기준으로 수직의 좌표를 리턴
shiftKey - shiftkey 가 눌렸을 때 true 를 리턴
target - 이벤트가 발생한 element 를 리턴
type - 발생한 event 의 종류를 리턴
which - 키보드 event 에 대한 ASCII 코드를 리턴, 마우스 버튼에 대한 이벤트도 리턴

ready(fn) - DOMelement 들이 load 가 완료된 시점에 함수를 실행
$(document).ready(function(){ ... });

bind(type, [data ,] fn); - 이벤트가 발생했을 경우 사용자가 구현한 함수 실행
type - 이벤트 타입
data - 전달 데이터
fn - 사용자 정의 함수
$("p").bind("click", function(e){ ... });
e:이벤트 객체

unbind([type ,][data]); - bind 된 event 를element 에서 삭제

one(type, [data ,] fn); - 이벤트가 발생했을 경우 단 한번만 실행
$("div").one("dblclick", function(){ ... });

hover(over, out); - 마우스가 대상 element 위로 올라갔을 때는 over 가 실행되고, 밖으로 나갔을 때는 out 이 실행
$("p").hover(function(){ 위로 올라왔을 때의 구현 }, function(){ 나갔을 때의 구현 });

toggle(fn, fn); - 클릭했을 때 마다 번갈아 실행
$("body").toggle(function(){ 홀수번째 실행 될 함수 }, function(){ 짝수번째 실행 될 함수});

focus(fn); - 포커스가 발생 했을 때 실행
$("input#name").focus(function(){ 포커스가 발생 했을 때 구현 });

blur(fn); - 대상 element 가 focus 를 잃어버렸을 때 실행
$("input").blur(function(){ focus 를 잃어버렸을 때 발생 });

change(fn); - 대상 element 에 change event 가 발생 했을 때 실행
$("select").change(function(){});

click(fn); - 클릭 했을 때 실행
$("p").click(function(e){ 클릭 했을 때 실행 구현 });

dblclick(fn); - 더블 클릭 했을 때 실행
$("p").dblclick(function(e){ 더블 클릭 했을 때 실행 구현 });

error(fn); - 에러가 발생 했을 때 실행
$("img").error(function(e){ 에러가 났을 때 실행 구현 });

keydown(fn); - 키보드의 키가 눌렸을 때 실행
$("document").keydown(function(e){ 키보드 눌렸을 때 실행 });

select(fn); - input, text, textarea element 에 문자열을 선택하는 event 가 발생 했을 때 실행
$("textare").select(function(){선택 했을 대 실행 });

submit(fn); - submit event 가 발생 했을 때 실행
$("form").submit(function(){ submit 눌렸을 때 실행 });