onabort | 이미지의 다운로드를 중지할 때 (브라우저의 중지버튼) |
onactivate | 개체가 활성화될 때 발생 (태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러) |
onafterprint | 문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생 |
onafterupdate | 데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되었을 때 발생(데이터 개체부분 참조) |
onbeforeactivate | 개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고) |
onbeforecopy | 선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생 |
onbeforecut | 선택 영역이 지워지기 바로 직전에 발생 |
onbeforedeactivate | 부모 문서에서 현재 개체에서 다른 개체로 activeElement가 바뀔 때 발생 (activeElement는 개체를 지칭하는 예약어로도 쓰임) |
onbeforeeditfocus | 편집가능한 개체 내부에 포함된 개체가 편집활성화된 상태가 되거나 혹은 편집가능한 개체가 제어를 위해 선택될 때 |
onbeforepaste | 시스템의 클립보드에서 문서로 붙여넣기 될 때 대상 개체에서 발생 |
onbeforeprint | 문서가 출력되거나 혹은 출력하기 위해 출력미리보기 직전에 발생 |
onbeforeunload | 페이지가 언로드되기 직전에 발생 |
onbeforeupdate | 데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가 업데이트 되기전에 발생 (데이터 개체부분 참조) |
onblur | 개체가 포커스를 잃었을 때 |
onbounce | 마퀴태그에서 alernate상태에서 스크롤이 양 사이드에서 바운드될 때 발생 |
oncellchange | 데이터 제공 개체에서 데이터가 변화할 때 발생 |
onchange | 개체 혹은 선택영역의 내용이 바뀔 때 발생 |
onclick | 개체위에서 마우스의 왼쪽 버튼을 누를 때 발생 |
oncontextmenu | 클라이언트 영역에서 사용자가 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 열 때 발생 |
oncontrolselect | 사용자가 개체의 제어 영역을 만들 때 발생 |
oncopy | 시스템의 클립보드에 선택영역 혹은 개체를 복사할 때 소스 개체로부터 발생 |
oncut | 시스템의 클립보드에 선택영역 혹은 개체를 잘라낼때 소스 개체로부터 발생 |
ondataavailable | 비정기적으로 데이터를 전달하는 데이터 소스 개체로부터 데이터가 도착할 때마다 정기적으로 발생 |
ondatasetchanged | 데이터 소스개체의 변화에 의해 데이터가 노출된 상태로 될 때 발생 |
ondatasetcomplete | 데이터 소스 개체로부터 모든 데이터가 유용한 상태로 표시될 때 발생 |
ondblclick | 사용자가 개체에 더블클릭 할때 발생 |
ondeactivate | 모 문서에서 현재 개체에서 다른 개체로 activeElement가 변할 때 발생 |
ondrag | 드래그 상태가 지속되는 동안 소스 객체로부터 발생 |
ondragend | 드래그 상태가 끝날 때 소스 객체로부터 발생 |
ondragenter | 사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역으로 이동할 때 타갯 개체에서 발생 |
ondragleave | 사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역을 떠날 때 타갯 개체에서 발생 |
ondragover | 사용자가 개체를 드래그하여 드롭가능 위치로 지정된 영역내에서 드래그할 때 계속적으로 타갯 개체에서 발생 |
ondragstart | 선택된 개체 혹은 텍스트 영역에서 사용자가 드래그를 시작할 때 발생 |
ondrop | 드래그앤드롭 작용에서 상태가 진행되는 동안 개체가 타갯 개체에 드롭되었을 때 타갯 개체에서 발생 |
onerror | 개체가 로드되는 동안 발생하는 이벤트 |
onerrorupdate | 데이터 소스 개체 내에 데이터가 없데이트 되는 동안 에러가 발생할 때 데이터 영역 개체에서 발생 |
onfilterchange | 비주얼 필터의 상태가 바뀌거나 트랜지션이 완료되었을 때 발생 |
onfinish | 마퀴개체의 loop가 완료되었을 때 발생 |
onfocus | 개체가 포커스를 받았을 때 발생 |
onfocusin | 개체에 포커스가 셋팅되기 바로 직전 개체에 대해 발생 |
onfocusout | 포커스가 다른 개체로 이동한 후에 포커스를 가고 있는 현재 개체에서 발생 |
onhelp | 브라우저가 활성화 되어 있는 동안 F1키를 눌렀을 때 |
onkeydown | 사용자가 키를 눌렀을 때 |
onkeypress | 기능키를 제외한 키를 눌렀을 때 발생 |
onkeyup | 사용자가 키를 놓았을 때 발생 |
onlayoutcomplete | 소스 문서로 부터 콘텐드를 가지는 객체가 미리보기나 출력을 할때 현제 LayoutRect 개체를 모두 채우는 것이 끝났을 때 발생 |
onload | 브라우저가 개체를 로드한 후에 발생 |
onlosecapture | 개체가 마우스 캡쳐를 잃었을 때 발생 |
onmousedown | 개체 위에 마우스 버튼을 누를 때 발생(좌우 어느 버튼이든) |
onmouseenter | 개체 안으로 마우스 포인터가 들어올 때 발생 |
onmouseleave | 개체의 경계밖으로 마우스 포인터가 이동할 때 발생 |
onmousemove | 개체위에서 마우스가 움직일 때 발생 |
onmouseout | 개체밖으로 마우스 포인터가 빠져나갈 때 발생 |
onmouseover | 개체위로 마우스 포인터가 들어올 때 발생 |
onmouseup | 마우스가 개체위에 있는 동안 마우스를 누른 상태에서 해제될 때 발생 |
onmousewheel | 마우스 휠이 돌아갈 때 발생 |
onmove | 개체가 움직일 때 발생 |
onmoveend | 개체가 움직임이 끝날 때 발생 |
onmovestart | 개체가 움직이기 시작할 때 발생 |
onpaste | 문서에 클립보드로부터 데이터가 전송될 때 타겟 개체에서 발생 |
onpropertychange | 개체의 속성이 바뀔 때 발생 |
onreadystatechange | 개체의 상태가 변화할 때 발생 |
onreset | Form 을 사용자가 리셋할 경우 발생 |
onresize | 개체의 크기가 바뀔 때 발생 |
onresizeend | 제어영역에서 개체의 크기가 사용자에 의해 변화가 끝날 때 발생 |
onresizestart | 제어영역에서 개체의 크기가 사용자에 의해 변화되기 시작할 때 발생 |
onrowenter | 데이터 소스 내에서 현재 열이 변화되거나 개체에 새로운 유용한 데이터가 입력될 때 발생 |
onrowexit | 데이터 소스 콘트롤이 개체 내의 현재 열을 변화시킬 때 발생 |
onrowsdelete | 레코드셋에서 열이 삭제될 때 발생 |
onrowsinserted | 현재 레코드셋에 새로운 열이 추가된 후에 발생 (데이터 개체에서) |
onscroll | 사용자가 개체 내의 스크롤 바를 스크롤할 때 발생 |
onselect | 현재 선택된 영역이 바뀔 때 발생 |
onselectionchange | 문서의 선택 영역의 상태가 바뀔 때 발생 |
onselectstart | 개체가 선택되기 시작할 때 발생 |
onstart | 마퀴개체에서 루프가 매번 시작될 때 발생 |
onstop | 사용자가 stop 버튼을 눌렀을 경우 혹은 페이지를 떠날 때 발생 |
onsubmit | 폼이 전송되기 직전에 발생 |
onunload | 개체가 언로드되기 직전에 발생 |
빠진 이벤트가 있다면 댓글로 달아주세요.
추가할께요.
그리고 더블어 이벤트를 사용하기 위해서는 이벤트 정의가 필요한데, 이는 브라우저별로 인식하는 방식이 다르기에 다음과 같은 스크립트를 응용합니다.
function addEvent(obj, eventType, functionName) { if (obj.addEventListener) { obj.addEventListener(eventType, functionName, false); } else if (obj.attachEvent) { obj.attachEvent("on" + eventType, functionName); } else { obj["on" + eventType] = functionName; // same as "obj.onType = functionName" } } function removeEvent(obj, eventType, functionName) { if (obj.removeEventListener) { obj.removeEventListener(eventType, functionName, false); } else if (obj.detachEvent) { obj.detachEvent("on" + eventType, functionName); obj[eventType + functionName] = null; obj["e" + eventType + functionName] = null; } else { obj[eventType + functionName] = null; obj["on" + eventType + functionName] = null; obj["e" + eventType + functionName] = null; } } // 이벤트 정의할때 ( 이벤트의 'on'접두사는 빼고 입력 ) addEvent(window,"load",eventFunction); // window.onload = function(){eventFunction();}; 와 동일 addEvent(document.getElementById("name"),"change",eventFunction); // 이벤트 삭제할때 removeEvent(window,"load",pageSet); removeEvent(document.getElementById("name"),"change",eventFunction); // 이벤트 핸들러 함수 function eventFunction(e) { // 처리할 스크립트 } |
이벤트 응용범위는 매우 방대하고 강력하기 때문에 CSS와 잘 섞어서 사용하면 플래시 부럽지 않은 효과를 연출할 수도 있습니다.
그리고 무한 반복 주의하세요.
가령 onresize 이벤트를 사용하여 창의 사이즈를 조절할때 창의 사이즈가 조절되면 다시 onresize 이벤트가 작동하게 됩니다. 그러면 또 사이즈를 조절하고 또 작동하는 식으로 무한루프에 빠지게 됩니다.
그러니 논리적인 알고리즘 설계가 중요해요. (저도 한번씩은 꼭 실수하고 넘어가는 부분...)
스크립트는 최소한 3종류 이상의 브라우저에서 테스트를 하세요. (다하면 좋겠지만...)
틀린 내용 있다면 지적해 주세요.
출처 - http://www.technote.co.kr/php/technote1/board.php?board=apple2&command=body&no=257
'Development > JavaScript' 카테고리의 다른 글
javascript - use strict (0) | 2014.08.06 |
---|---|
javascript - Naming Conventions (0) | 2014.07.18 |
javascript - event.preventDefault() alternative for IE8 (0) | 2014.05.15 |
javascript - requestAnimationFrame (0) | 2014.04.02 |
javascript - 초에서 시간, 분 구하기 (0) | 2014.04.01 |