Events
javascript is used to create dynamic web pages but with out events javascript is meaningless. Events are actions that can be detected by JavaScript.In this tutorial I give an overview of what event handling is, who to handle events.
Every element on a web page (button,anchor tag,input type etc) has certain events which can trigger a JavaScript. For example, we can use the onclick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
JavaScript is meant to add interactivity to your pages: the user does something and the page reacts. this only possibele by the help of an event.
Events are normally used with functions, and the function will not be executed before the event occurs.
Example How to use event:
<html>
<head>
function test(){
alert('onclick event example.');
}
</head>
<body>
<input type="button" name="clickme" value="click me" onclick="test();" />
</body>
</html>
here in the input element we add an event onClick and call an user define function test();
when user click on this button the onclick even fire and call the userdefine function test() and the code in side the function execute for more about user define function click here.
List of some events
Window Event Attributes
Events triggered for the window object (applies to the <body> tag): the event's are applied to body tag only.
onload
Fires after the page is finished loading
example: <body onload="function_name();">
example: <body onload="function_name();">
onunload
Fires once a page has unloaded (or the browser window has been closed)
example: <body onunload="function_name();">
Fires once a page has unloaded (or the browser window has been closed)
example: <body onunload="function_name();">
Form Events
Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):
onblur
Fires the moment that the element loses focus
example: <input type="text" name="fname" onblur="function_name();">
Fires the moment that the element loses focus
example: <input type="text" name="fname" onblur="function_name();">
onchange
Fires the moment when the value of the element is changed
example: <input type="text" name="fname" onchange ="function_name();">
onfocus
Fires the moment when the element gets focus
example: <input type="text" name="fname" onfocus ="function_name();">
onreset
Fires when the Reset button in a form is clicked
example <input type="reset" name="rst" value="Reset it" onreset="function_name();" >
onselect
Fires after some text has been selected in an element
example: <input type="text" name="fname" onselect="function_name();">
onsubmit
Fires when a form is submitted
examle: <form name="form1" action="your asction" onsubmit="function_name();">
Keyboard Events
Events triggered by a key, or similar user actions:
onkeydown
Fires when a user is pressing a key
example: <input type="text" name="fname" onkeydown ="function_name();">
onkeypress
Fires when a user presses a key
example: <input type="text" name="fname" onkeypress ="function_name();">
onkeyup
Fires when a user releases a key
example: <input type="text" name="fname" onkeyup ="function_name();">
Mouse Events
Events triggered by a mouse, or similar user actions:
onclick
Fires on a mouse click on the element
example: <input type="button" name="fname" value="click" onclick ="function_name();" />
ondblclick
Fires on a mouse double-click on the element
example: <input type="button" name="fname" value="click" ondbclick ="function_name();" />
onmousedown
Fires when a mouse button is pressed down on an element
example: <div onmousedown ="function_name();" ><!-- Your content --></div>
onmousemove
Fires when the mouse pointer moves over an element
example: <div onmousemove ="function_name();" ><!-- Your content --></div>
onmouseout
Fires when the mouse pointer moves out of an element
example: <div onmouseout ="function_name();" ><!-- Your content --></div>
onmouseover
Fires when the mouse pointer moves over an element
example: <div onmouseover ="function_name();" ><!-- Your content --></div>
onmouseup
Fires when a mouse button is released over an element
example: <div onmouseup ="function_name();" ><!-- Your content --></div>
No comments:
Post a Comment