- onload = script [CT]
- The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.
- onunload = script [CT]
- The onunload event occurs when the user agent removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements.
- onclick = script [CT]
- The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.
- ondblclick = script [CT]
- The ondblclick event occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements.
- onmousedown = script [CT]
- The onmousedown event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements.
- onmouseup = script [CT]
- The onmouseup event occurs when the pointing device button is released over an element. This attribute may be used with most elements.
- onmouseover = script [CT]
- The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements.
- onmousemove = script [CT]
- The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.
- onmouseout = script [CT]
- The onmouseout event occurs when the pointing device is moved away from an element. This attribute may be used with most elements.
- onfocus = script [CT]
- The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
- onblur = script [CT]
- The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.
- onkeypress = script [CT]
- The onkeypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements.
- onkeydown = script [CT]
- The onkeydown event occurs when a key is pressed down over an element. This attribute may be used with most elements.
- onkeyup = script [CT]
- The onkeyup event occurs when a key is released over an element. This attribute may be used with most elements.
- onsubmit = script [CT]
- The onsubmit event occurs when a form is submitted. It only applies to the FORM element.
- onreset = script [CT]
- The onreset event occurs when a form is reset. It only applies to the FORM element.
- onselect = script [CT]
- The onselect event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements.
- onchange = script [CT]
- The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.
자동 로그아웃 등에 사용되는 onUnload 이벤트는 창을 닫는 것만이 아니라 새로고침에서도 발생한다.
이것을 구분하는 스크립트
if( self.screenTop > 9000 ) {
// 브라우저 닫힘
} else {
if( document.readyState == "complete" ) {
// 새로고침
} else if( document.readyState == "loading" ) {
// 다른 사이트로 이동
}
}
}
<body onUnload="javascript:unload();">
</body>
window.onload 이벤트를 등록하면 이미지나 css 파일이 다 로드된 후에 이벤트가 발생한다.
가끔 웹 서버 문제로 이미지 하나가 로딩이 늦어 질 경우 이벤트 발생 시점이 의도한 바와 차이가 생기게 된다.
이를 해결하기 위한 방법이 아래의 URL 에서 확인 가능하다.
The window.onload Problem - Solved!
* http://dean.edwards.name/weblog/2005/09/busted
window.onload (again)
* http://dean.edwards.name/weblog/2006/06/again/
위의 방법에 따라 onload 이벤트를 등록하게 될 경우 내부적으로 이벤트를 Push 하는 방법을 적용하고,
onunload 이벤트에 하나가 아닌 다수의 이벤트를 등록할 때 이를 관리하기 위한 부분도 추가하여
기존에 사용하던 이벤트 관리 스크립트를 업데이트 했다.
아래는 이벤트 관리 스크립트 소스.
/**
* Class :: Event add, remove, registed event unload
* File :: Event.js
*
* @classDescription 브라우저에 따른 이벤트 등록, 해제, 등록된 이벤트 모두 해제
*/
var EventManager = function() {
constructor = this.__construct();
}
/**
* window 객체에 load 이벤트 등록시 펑션 리스트를 등록
*/
var _OnLoadList = [];
/**
* window 객체에 unload 이벤트 등록시 펑션 리스트를 등록
*/
var _UnLoadList = [];
/**
* prototype of EventHandler class
* __construct
*
* _EventList
*
* add
* remove
* unload
*/
EventManager.prototype = {
/**
* window의 unload 이벤트에 EventHandler.unload 메소드를 등록
*
* @see #unload
* @constructor
*/
__construct: function() {
var oThisObject = this;
/* for Mozilla */
if (window.addEventListener) {
window.addEventListener("DOMContentLoaded", oThisObject.baseRun, false);
/* for Safari */
} else if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
oThisObject.baseRun();
}
}, 10);
/* for Internet Explorer */
} else {
var bInit = false;
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var oScriptLoad = document.getElementById("__ie_onload");
oScriptLoad.onreadystatechange = function() {
if (this.readyState == "complete") {
oThisObject.baseRun();
}
};
bInit = true;
/*@end @*/
/* for Other */
if (bInit == false) {
window.onload = oThisObject.baseRun;
}
}
this.add( window, 'unload_event', EventManager.prototype.unload );
},
/**
* 페이지 종료시 등록된 이벤트를 해제하기 위하여 추가된 Event 목록
*
* @type {Array} add 에서 데이터 추가
*/
_EventList: [],
/**
* event 를 addEventListener 와 attachEvent 를 사용하여 등록 <br />
* _EventList 에 등록된 이벤트를 배열로 저장
*
* @param {Object} setElement HTML Object
* @param {String} eventName event name - on 을 접두어로 붙이지 않음
* @param {Function} funcName Exist function name
*/
add: function( setElement, eventName, funcName ) {
if ((setElement == window) && (eventName == 'load')) {
_OnLoadList.push(funcName);
} else if ((setElement == window) && (eventName == 'unload')) {
_UnLoadList.push(funcName);
} else {
if ((setElement == window) && (eventName == 'unload_event')) {
eventName = 'unload';
}
if ( window.addEventListener ) {
setElement.addEventListener( eventName, funcName, false );
} else {
setElement.attachEvent( 'on' + eventName, funcName );
}
this._EventList.push({
object: setElement,
event: eventName,
func: funcName
})
}
},
/**
* event 를 removeEventListener 와 detachEvent 를 사용하여 해제
*
* @param {Object} setElement HTML Object
* @param {String} eventName event name - on 을 접두어로 붙이지 않음
* @param {String} funcName Exist function name
*/
remove: function( setElement, eventName, funcName ) {
if ( window.removeEventListener ) {
setElement.removeEventListener( eventName, funcName, false );
} else {
setElement.detachEvent( 'on' + eventName, funcName );
}
},
/**
* window.unload 이벤트시 _EventList 에 등록된 모든 이벤트를 해제
*/
unload: function() {
var sFunction = '';
for ( var oEventData in _UnLoadList ) {
sFunction = _UnLoadList[oEventData];
if (sFunction == '______array') {
continue;
}
sFunction.call();
}
_UnLoadList = []
for ( var oEventData in this._EventList ) {
this.remove( oEventData.object, oEventData.event, oEventData.func );
}
},
/**
* window.onload 에 등록한 function 을 모두 실행시킨다.
*/
baseRun: function() {
var sFunction = '';
for ( var oEventData in _OnLoadList ) {
sFunction = _OnLoadList[oEventData];
if (sFunction == '______array') {
continue;
}
sFunction.call();
}
}
}
var oEvent = new EventManager();
var Event = function() {
return oEvent;
}