JavaScript Event

ITWeb/개발일반 2008. 2. 20. 17:41


 
-The browser has an event-driven, single-threaded, asynchronous programming model.
-Events are targeted to particular nodes.
-Events cause the invocation of event handler functions.
-Events are normally used in combination with functions, and the function will not be executed before the event occurs!

 
Attribute
The event occurs when...
FF
N
IE
onabort
Loading of an image is interrupted
1
3
4
onblur
An element loses focus
1
2
3
onchange
The user changes the content of a field
1
2
3
onclick
Mouse clicks an object
1
2
3
ondblclick
Mouse double-clicks an object
1
4
4
onerror
An error occurs when loading a document or an image
1
3
4
Onfocus
An element gets focus
1
2
3
onkeydown
A keyboard key is pressed
1
4
3
onkeypress
A keyboard key is pressed or held down
1
4
3
onkeyup
A keyboard key is released
1
4
3
onload
A page or an image is finished loading
1
2
3
onmousedown
A mouse button is pressed
1
4
4
onmousemove
The mouse is moved
1
6
3
onmouseout
The mouse is moved off an element
1
4
4
onmouseover
The mouse is moved over an element
1
2
3
onmouseup
A mouse button is released
1
4
4
onreset
The reset button is clicked
1
3
4
onresize
A window or frame is resized
1
4
4
onselect
Text is selected
1
2
3
onsubmit
The submit button is clicked
1
2
3
onunload
The user exits the page
1
2
3

 
Event parameter
-function getCBEvent (oNsEvent, PARAM1…) {
// window.event : ff 에서 undefined
var oEvent = oNsEvent || window.event;
var oTarget = oEvent.target || oEvent.srcElement;
}
onclick=getCBEvent(event, param1,..,parmaN);
-Microsoft does not send an event parameter, use the global event object instead

Event listener.
Classic
§node["on" + type] = f;
Microsoft
§node.attachEvent("on" + type, f);
W3C
§node.addEventListener(type, f, false);
Example :
§if ( DOMObject.addEventListener ) {
§ DOMObject.addEventListener("click", getMsg, false);
§} else if (DOMObject.attachEvent ) {
§ DOMObject.attachEvent("onclick", getMsg);
§} else if (DOMObject.onclick ) {
§ DOMObject.onclick = getMsg; // or
§ DOMObject["onclick“] = getMsg;
§}

 
Event bubbling
-Event bubbling is that the event is delivered in  elements, and so on until the event is canceled.
Cancel bubbling
-function cancelBubbling ( oEvent ) {
if ( oEvent.stopPropagation ) {
oEvent.stopPropagation(); // FF
} else {
oEvent.cacnelBubble = true; // IE
}
}



: