Download presentation
Presentation is loading. Please wait.
1
JavaScript Events
2
Lecture Overview JavaScript Events
3
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
4
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
5
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>
6
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()" />
7
JavaScript Event Categories
Events can be roughly categorized as Mouse events Keyboard events Form events The canonical list
8
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
9
JavaScript Keyboard Events
onKeyDown: keyboard key is pressed onKeyUp: keyboard key is released onKeyPressed: keyboard key is pressed and released
10
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
Similar presentations
