JavaScript Events
Lecture Overview JavaScript Events
JavaScript Events (Introduction) Conceptually, Java Script events work just like .NET (VB) events They fire as a result of some user or other action Code that executes in response to an event is called an event handler The syntax and event names differ between VB and JavaScript
Creating Event Handlers There are two ways to create event handlers Inline event handlers have code in the event argument Create functions and wire them to the event This is what we have been doing
Inline Event Handler (Example) The alert dialog appears when the user clicks the button The event handler appears as an embedded string OK for one or two lines but not for long procedures <body> <input type="button" value="Click Me" onclick= "alert('you clicked me');" /> </body>
Calling a Function from an Event handler Event handlers are functions with some special characteristics The following statement calls the procedure btnShowEventClick() when the button is clicked: <input id="btnShowEvent" type="button" value="Execute event handler" onclick="btnShowEventClick()" />
JavaScript Event Categories Events can be roughly categorized as Mouse events Keyboard events Form events The canonical list http://www.w3schools.com/jsref/dom_obj_event.asp
JavaScript Mouse Events onMouseDown: User has pressed the mouse button but has not released it onMouseUp: User has released the mouse button onClick: User has pressed and released the mouse button onMouseMove: User has moved the mouse onMouseOver: Mouse has entered the region of a control onMouseOut: Mouse has left the region of a control
JavaScript Keyboard Events onKeyDown: keyboard key is pressed onKeyUp: keyboard key is released onKeyPressed: keyboard key is pressed and released http://localhost:49811/IS360/IS360JavaScriptEvents.html
JavaScript Form Events onBlur: when an element loses focus onFocus: when an element gets focus onInvalid: when an element input is not valid onReset: when a form is reset onSubmit: when the form is submitted to the server