Catching Events Bok, Jong Soon Jongsoon.bok@gmail.com www.javaexpert.co.kr
What Is an Event? Events Describe what happened. Event sources The generator of an event Event handlers A function that receives an event, deciphers it, and processes the user s interaction.
The Events Event Description Affected Objects abort blur, focus When the image is prevented from loading When an object loses or receives focus An image element Applicable to window and form elements change When a selection changes Applicable to form elements where the value changes and after the elements loses focus click,doubleclick (dblclick) contextmenu Clicking or double-clicking(two clicks in rapid succession) with the mouse Clicking with the right mouse button(bringing up the context menu) Most page elements A web page document
The Events (Cont.) Event Description Affected Objects error keydown, keyup, keypress load, unload mousedown, mouseup mouseover, mouseout When the page or image can t load Pressing a key or releasing it, and the act of doing both When the image or page if finished loading, or the page loses focus Pressing down on the mouse button, releasing the mouse button Moving the mouse over an element, moving the mouse away from an element A web page document and image A web page document and certain form elements A web page document and image(load only) Most page elements Most page elements
The Events (Cont.) Event Description Affected Objects mousemove The mouse moves Most page elements reset A form is reset The form resize A window or frame is resized A window or frame select Selecting text A form text area or input scroll When an object is scrolled A window, frame, or element with overflow set to auto(presence of the scrollbar) submit A form is submitted A form
Event Handling To reiterate, an event handler has the following syntax: onload Where the event handler starts with on, followed by the event type : load, click, and so forth. You can implement the JavaScript to process directly in the handler: <body onload="var i = 23; i *= 3; alert(i);"> More frequently, though, you'd call a function: <body onload="calcnumber();"> window.onload=calcnumber;
Attributes Property Description altkey button clientx clienty screenx screeny shiftkey Returns whether or not the "ALT" key was pressed when an event was triggered Returns which mouse button was clicked when an event was triggered Returns the horizontal coordinate of the mouse pointer when an event was triggered Returns the vertical coordinate of the mouse pointer when an event was triggered Returns the horizontal coordinate of the mouse pointer when an event was triggered Returns the vertical coordinate of the mouse pointer when an event was triggered Returns whether or not the "SHIFT" key was pressed when an event was triggered
Sample codes
Sample codes (Cont.)
Sample codes (Cont.)
Sample codes (Cont.)
Register Event Object MSIE
Register Event Object (Cont.) Firefox, Chrome, Opera, Safari
Register Event Object (Cont.) Cross-Browser Event Handling
Event Bubbling 한개의 Event 가여러개의 Element 에영향을미칠때는어떻게?
DOM Level 2 Event Handling addeventlistener object.addeventlistener( event, eventfunction, boolean); true : bubble-up false : cascade
DOM Level 2 Event Handling (Cont.)
DOM Level 2 Event Handling (Cont.) removeeventlistener object.addeventlistener( event, eventfunction, boolean); document.forms[0].elements[0].r emoveeventlistener("click",casc adedown,true);
DOM Level 2 Event Handling (Cont.)
DOM Level 2 Event Handling (Cont.) But MSIE 6 belower, MSIE 7, MSIE 8 it's unlikely that a Microsoft product will support the W3C event model anytime soon. attachevent, detachevent object.attachevent( eventhandler, function);
DOM Level 2 Event Handling (Cont.) Cross-Browser Event Handling
DOM Level 2 Event Handling (Cont.)