Learn Javascript Events


JavaScript Events Tutorial


Table of Contents

coding-zon-js-objects-demo
  1. What is an Event?
  2. Different types of events
    1. onClick
    2. onLoad and onUnload
    3. onChange
    4. onFocus
    5. onBlur
    6. onMouseOver and onMouseOut
  3. Linking external JavaScript in the current HTML.

  4. return statement

     
 


JS Home


What is an Event?

In JavaScript, an event is an action performed by a user on a webpage.

Different types of events:

Onclick : It occurs when  user clicks  a mouse button. There are multiple types of mouse events such as DoubleClick, mouse over, drag and drop etc., We will learn all of them in details in later topics.

Onload/OnUnload : when web page is loading, it is said to be onload event, when page closed then it is called as unload event.
 

Mouseover/hotspot : when mouse placed/moved on to image/region, this even occurs.
Onfocus, Onblur : When a user selects/deselects, an input field in an HTML, these events are fired.

Onsubmit:  When an HTML form is submitting. 

Keypress : When key pressed on keyboard.
 

Note: Events are normally used in combination with functions, and the
function will not be executed before the event occurs!
 

onClick

function will not be executed before the event occurs. When user clicks the button,


then displaymessage() function get executed.

 
Example-1:  
 
<html>
<head>
<script type="text/javascript">
 
function displaymessage ()
{
alert("Hello World!");
}
 
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="displaymessage()" />
</body>
</html> 
 
Example-2: 
 
 
<html>
<head>
<script type="text/javascript">
 
function reloadPage()
{
window.location.reload();
alert("Page reloaded");
}
 
</script>
</head>
<body>
<input type="button" value="Reload page" onclick="reloadPage()" />
</body>
</html>

MoveTop

onLoad and onUnload

 
The onLoad and onUnload events are fired when the user enters or leaves the page.
example:

<body onLoad ="alert('Welcome to my web page')">
 
<body onUnload ="alert('Goodbye - Have a nice day')">
 
Adding multiple events in a single body tag 
 
<body onLoad ="alert('Welcome to my web page')" 
onUnload ="alert('Goodbye - Have a nice day')">

The onLoad event is often used to check the visitor's browser information, such as browser type and browser version etc., before loading the content.

and load the proper version of the web page based on the information.

Move ↑Top

example
 
<html>
<head> 
</head>
 
<body onLoad ="alert('Welcome to my web page')"  
onUnload ="alert('Goodbye - Have a nice day')">
 
</body>
</html>

Note: onUnload even not working in modern browsers.


onChange onFocus, onBlur

 

onChange


Set default text to text box and try to change in browser

<INPUT type="text" id="email" value="contact@e-trainings.in"
onchange="alert('Text is modified')">

Top ↑

example
 
<html>
<head> 
</head>
<body>
 
<INPUT type="text" id="email" value="contact@e-trainings.in"
onChange="alert('Text is modified')"> 

 
 
</body>
</html>

onFocus:

 
when entered into the text box

<INPUT type= "text" onFocus = "alert('focus Gained')">

onBlur:


when exited from text box

<INPUT type=  "text" onBlur = "alert('focus Lost')">
 
 
example


 
<html>
<head> 
</head>

 <INPUT type= "text" onBlur = "alert('focus Lost')"> 
 <INPUT type= "text" onFocus = "alert('focus Gained')">  
 
</body>
</html> 
 
 

onMouseOver and onMouseOut


onMouseOver and onMouseOut are often used to create "animated"
buttons.

<a href="http://e-trainings.in" onmouseover="alert('An onMouseOver
event');">
<img src="" alt="coding-zon" /></a>
 
 
 
example
 
 
<html>
<head>  
<body>
<a href="http://e-trainings.in" onmouseover="alert('An onMouseOver
event');">
<img src="" alt="coding-zon" /></a>
 
 
<a href="http://e-trainings.in" onmousOut="alert('An onMouseOut
event');">
<img src="" alt="coding-zon" /></a> 
 
 
 
</body>
</html> 
 
 
on keydown
------------
<body>
<form>
<INPUT type = "text" onKeyDown = "alert('Key pressed')">
</form>
</body>
</html> 
 

Linking external JavaScript in the current HTML.

 MoveTop 👆

home.html

<html>
<head>
<script type ="text/javascript" src="example.js"> </script>
</head>
<body>
<script> hello(); </script>
</body>
</html>


example.js


function hello()
{
document.write("<h1>Hello World</h1>");
}
 

 

return statement

If statement pass the test, returns true.
If the expression fails, It displays error-message and return false.
If it returns true, then it executes the file specified in an action.

Syntax:

<form action="db_login.php" method="GET" OnSubmit="return verify(this.form)">

You will see the example of onsumbit event in next topic.



JS Validations

 


Thanks for Reading this article.

Happy Coding !!

Comments

Post a Comment

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.
Read more

Creating a new PDF by Merging PDF documents using TCPDF

Image
Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs? You can merge several documents into one. In PHP, you have a library called TCPDF which allows you to combine one or more PDF documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide
Read more

Import excel file into mysql in PHP

Image
  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library - extract it, rename the folder to library . Create index.php file with given code in a server. Create excelUpload.php with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:   5.5.11 Folder Structure      Query: CREATE TABLE IF NOT EXISTS `tbl_products` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT, `productname` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY (`id`) )     Top index.php <!DOCTYPE html> <html> <head> <title> coding-zon Demo - Upload Excel to MySQL in PHP </title> <lin
Read more