JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
Home » Javascript »
Javascript Events
What is Events?
- when the user perfrom some action on html element is called events.
- When the html page loads, it is called page load event.
- When the user clicks on a button it is called click event.
- when the user press any key on html elements that time events occus.
JavaScript HTML/DOM events
File name : index.php
JavaScript code is executed with HTML/DOM events. So before learning JavaScript, let’s have some idea about events.
Events :- Description
onclick :- occurs when element is clicked.
ondblclick :- occurs when element is double-clicked.
onfocus :- occurs when an element gets focus such as button, input, textarea etc.
onblur :- occurs when form looses the focus from an element.
onsubmit :- occurs when form is submitted.
onmouseover :- occurs when mouse is moved over an element.
onmouseout :- occurs when mouse is moved out from an element (after moved over).
onmousedown :- occurs when mouse button is pressed over an element.
onmouseup :- occurs when mouse is released from an element (after mouse is pressed).
onload :- occurs when document, object or frameset is loaded.
onunload :- occurs when body or frameset is unloaded.
onscroll :- occurs when document is scrolled.
onresized :- occurs when document is resized.
onreset :- occurs when form is reset.
onkeydown :- occurs when key is being pressed.
onkeypress :- occurs when user presses the key.
onkeyup :- occurs when key is released.
File name : index.php
Click Events.
Click Events:onclick events occurs when a user clicks the left button of his mouse. The event is triggered when the html field is clicked on. This is especially useful for submit button, radio buttons and checkboxes.
Examples :-
When the user click on button to see result.
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript";
}
</script>
</head>
<body>
<p>Click the button to see result.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Examples 2:-
When the user click on button to show alert box.
File name : index.php
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello JavaScript")
}
//-->
</script>
</head>
<body>
<p>Click on hello js button and see alert message. </p>
<form>
<input type="button" onclick="sayHello()" value="Hello Js" />
</form>
</body>
</html>
Examples 3:-
When the user click on button to show alert box.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Click Event</title>
</head>
<body>
<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
</body>
</html>
Examples 3:-
Double click events.
File name : index.php
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Mahtab";
}
</script>
</head>
<body>
<p ondblclick="myFunction()">Doubleclick this paragraph to call js function.</p>
<p id="demo"></p>
</body>
</html>
The Contextmenu Event (oncontextmenu)
The contextmenu event occurs when a user clicks the right mouse button on an element to open a context menu. You can handle a contextmenu event with an oncontextmenu event handler.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Contextmenu Event</title>
</head>
<body>
<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
</body>
</html>
The Mouseover Event (onmouseover)
The mouseover event occurs when a user moves the mouse pointer over an element.
File name : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Mouseover Event</title>
</head>
<body>
<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>
</body>
</html>
File name : index.php
File name : index.php
File name : index.php