JavaScript Event

 

•-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

– }

–}