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.
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
– }
–}