Please visit my new Web Site https://coderstechzone.com
Event?
Event means action. When user click a button means user wants to perform an action. Events like performing:
- Click on a button
- Press a key
- Highlight text
- Drag & Drop
List of available javascript Events are given below:
*To see the example scroll down
Event | Description | Applicable for ? |
onAbort | When user cancel image loading | Image |
onBlur | When control lost its Focus | Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window |
onChange | Combo index change/Textbox data change | Text, TextArea, Select |
onClick | Most useful event. Occur when user click on a button | Button, Checkbox, Link, Radio, Submit |
onDblClick | When user double click on a Link | Link |
onFocus | When an object get focus | Button, Checkbox, Radio, Reset, Select, Submit, Text, TextArea |
onKeyDown | When the key is down means pressing time | Link, TextArea |
onKeyPress | When user presses/holds a key | Link, TextArea |
onKeyUp | When user release a key | Link, TextArea |
onLoad | After completion of loading a page | Window, Image |
onMouseDown | When mouse presses | Link, Button, Document |
onMouseMove | When user moves the mouse | Link, Button, Document |
onMouseOut | When user moves the mouse away from a object | Image, Link |
onMouseOver | When user moves the mouse over a object | Image, Link |
onMouseUp | When user release mouse | Document, Button, Link |
onMove | When user moves the browser window or a frame | Document, Button, Link |
onReset | By clicking on reset Button | Form |
onResize | When user resizes the browser window or a frame | Window |
onSelect | When user select text | Text, TextArea |
onSubmit | When user clicks the submit button | Form |
onUnload | When user leaves the page/close the browser | Window |
Example onClick Event:
Here i am showing how one can use this event & add event handler. Example covers both asp.net server side control & HTML control. To run this example just copy the below code then run your page. Add the below function in your javascript block:
Here i am showing how one can use this event & add event handler. Example covers both asp.net server side control & HTML control. To run this example just copy the below code then run your page. Add the below function in your javascript block:
function funcOnClick()
{
// Code goes here
alert("Click event fired");
// Return false never make a post back to server.
// so one can add validation by using this concept. If return true then the page will be post back to server
return false;
}
{
// Code goes here
alert("Click event fired");
// Return false never make a post back to server.
// so one can add validation by using this concept. If return true then the page will be post back to server
return false;
}
Add the handler:
<asp:button runat="server" id="cmdOnClick" text="OnClientClick" onclientclick="return funcOnClick();">
<asp:button runat="server" id="cmdOnClick" text="OnClientClick" onclientclick="return funcOnClick();">
<asp:button runat="server" id="cmdRunTime" text="Server Control onClick">
<input type="button" name="cmdHTML" value="HTML onClick" onclick="return funcOnClick();">
<asp:button runat="server" id="cmdOnClick" text="OnClientClick" onclientclick="return funcOnClick();">
<asp:button runat="server" id="cmdRunTime" text="Server Control onClick">
<input type="button" name="cmdHTML" value="HTML onClick" onclick="return funcOnClick();">
For cmdRunTime here i am showing how one can bind event handler in runtime. Here i am using asp.net(c#). Add the below line under Page_Load Event:
cmdRunTime.Attributes.Add("onClick", "return funcOnClick();");
Live Demo:
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
** Click to view the practical example on onMouseOver & onMouseOut
** Click to view the practical example on onclick
** Click to view the practical example on onkeypress
** Click to view the practicle example on onunload
** Click to view the practical example on OnClientClick
Ref:
http://www.w3schools.com/jsref/jsref_events.asp
6 comments:
@Shawpnendu
Hi,
Nice Blog!!
As you said
Here i am using asp.net(c#). Add the below line under Page_Load Event:
cmdRunTime.Attributes.Add("onClick", "return funcOnClick();");
It may create problem, because in C# onClick event is reserved for server side event. You should suggest OnClientClick instead. Let me know if i am wrong. Thanks and keep Posting!! :)
HI
Thanks for your comment.
Did you try it? :)
Hi Bikash,
Nice one.
I have a web page where i have 1 text box and 3 button fields in which 2 buttons to redirect to someother pages and 1 button is a search click.
When i enter something in the text box and click enter(return click) Its taking to me to other page (ie it is not performing serch click rather cliking one of the other two buttons)
could you please help me in this.
I tried setting tabindex to all the web controls but no luck.
Thanks for help in advance
Hi Anonymous,
Sorry for my late reply. First of all when you press enter then the immediate next control will be clicked. This is the common scenario. To overcome this problem use javascript.
Add keypress event handler & check the keycode. If keycode=13(Means enter) then programatically click on your required button to fire. In your case click on search button.
Let me know if you have further concern.
Thanks Bikash,
when we click enter next control will be clicked, true, but my page is not working as designed.
I even set the tab index to make it work but no use. I thought javascript would help and researched a lotfor the javascript code but some how found an easy solution than that. ie
form id="form1" runat ="server" defaultbutton="buttonid"
Any way thanks for your reply Bikash
Hi Lavan,
Thanks to correct me. I thought that anonymous asked for classic asp since we are familiar of such type of question from classic ASP developers.
I WOULD BE DELIGHTED TO HEAR FROM YOU