JavaScript Events

Events are actions or occurrences that happen to HTML elements.

JavaScript can act when an HTML Event occurs.

Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.


HTML Events

An HTML event can fires because of user action or browser action.

Here are some examples of HTML events:

  • An HTML web page was finished loading
  • An HTML web page was resized or closed
  • An HTML element was clicked by the user
  • An HTML input field was changed
  • An HTML form was submitted
  • An error occured

You can do something when an event occurs.
It is possible to execute JavaScript code when events are detected.

HTML elements have event handler attributes. It is possible to add JavaScript code to the attributes.

JS JavaScript - HTML Events

// The event handler attribute can have inline JavaScript code
<button onclick="alert('The full date: ' + Date())">Press me to get the time</button>
 
// The event handler attribute can call a JavaScript method 
<button onclick="displayFullDate()">Press me to get the time</button>

Using HTML Web Events

There are a number of different ways in which you can add event listener code to web pages.

Here are several lists of common HTML events.

 


HTML Mouse Events

JS JavaScript - HTML Mouse Events

Event Description Example
onclick The mouse is moved onto the element <button onclick="myClickFunction()"> Click me</button>
onmousedblclick The mouse has been pressed and released on an element  
onmouseover The mouse is moved onto the element <img onmouseover="showBigImg(this)"  src="ocean.png" alt="Ocean"> 
onmousemove The mouse is moved over an element  <div onmousemove="myActionFunction()"> Move the cursor over me</div>
onmousedown The mouse button is pressed on an element  <p onmousedown="myReactFunction()"> Click the text!</p>
onmouseup The mouse is released over an element  
onmouseenter The mouse is moved onto the element  
onmouseleave The mouse is moved off the element   
onmouseout The mouse is moved off the element  
onwheel The mouse wheel button is rotated in any direction  
onselect Some of the text has been selected <input type="text"  onselect="mySelectFunction()">
pointerlockchange The pointer was locked or released  
pointerlockerror It is impossible to lock the pointer for technical reasons or permission is denied
auxclick The middle mouse button was pressed. It is indicating that a non-primary button has been pressed

HTML Keyboard Events

JS JavaScript - HTML Keyboard Events

Event Description Example
onkeydown Event when user is pressing a key <input type="text" onkeydown="myKeyDownFunction()">
onkeypress Event when a user presses a key <input type="text" onkeypress="myKeyPressFunction()">
onkeyup Event when a user releases a key <input type="text" onkeyup="myKeyUpFunction()">

HTML Form Events

JS JavaScript - HTML Form Events

Event Description Example
onreset Event when a form is reset <form onreset="myFormResetFunction()">
  Enter username: <input type="text">
  <input type="reset">
</form>
onsubmit Event when a form is submitted <form onsubmit="myFormSubmitFunction()">
  Enter username: <input type="text">
  <input type="submit">
</form>

HTML Progress Events

JS JavaScript - HTML Progress Events

Event Description Example
onloadstart Event when the video is starting/looking for the video  <video onloadstart="myStartFunction()">
ondurationchange  Event when the duration of the audio/video is changed <video ondurationchange="myDurationFunction()">
onloadedmetadata  Event when meta data for audio/video has loaded <video onloadedmetadata="myMetaFunction()">
onloadeddata  Event when data for the current frame is loaded, but not enough to play next frame <video onloadeddata="myLoadedFunction()">
onprogress Event when the video is downloading <video onprogress="myProgressFunction()">
oncanplay Event when a video is ready to start playing (has buffered enough) <video oncanplay="myPlayFunction()">
oncanplaythrough Event when a video can be played all the way without any stop <video oncanplaythrough="myCanPlayFunction()">

HTML Focus Events

The onfocus event is the opposite of the onblur event.

JS JavaScript - HTML Focus Events

Event Description Example
onfocus Event when an element gets focus. Most used on element <input>, <select>, and <a> <input type="text" onfocus="myFocusFunction()">
onblur Event when user leaves an input field <input type="text" onblur="myBlurFunction()">

HTML Network Events

The ononline event is the opposite of the offline event.

Also use the navigator.onLine property to find out whether the browser is in online or offline mode (alert('Return true if browser is online, false if offline: ' + navigator.onLine);)

JS JavaScript - HTML Network Events

Event Description Example
ononline Event when the browser starts to work online <body ononline="myOnlineFunction()">
onoffline Event when the browser lost online contact <body onoffline="myOfflineFunction()">

BACK TO TOP






Check this out

JS JavaScript: Date Formats

There are generally 3 types of JavaScript date input formats:There are generally 3 types of JavaScript date input formats:

  • ISO Date
  • Date Short
  • ....

JS JavaScript: Switch

The switch statement evaluates an expression and match the expression's value to a case clause.

A switch statement can replace multiple if checks.
It gives a more descriptive way to compare a value with multiple variants.

JS JavaScript: Date Get Methods

The Date object is used to work with Dates and Times. Date Get methods let you get date values

The methods will return the date relative to the local timezone. Every method starts with get, and will return the relative number. Below is a deta....

JS JavaScript: Strict Mode

The strict context prevents some actions and throws more exceptions. Strict mode changes previously accepted "bad syntax" into errors. Strict mode will for example prevent using undeclared variables. The "use strict" directive was new in ECMAScript version 5.


BACK TO TOP

JavaScript is one of the 3 core language technologies of the World Wide Web that all web developers must learn:

1.      HTML to define the content of web pages.

2.      CSS to specify the layout of web pages.

3.      JavaScript to program the behavior of web pages.

JavaScript is a scripting or programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at, displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. − you can bet that JavaScript is probably involved.


The benefits of using JavaScript are:

1.      You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.

2.      Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.

3.      Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

4.      Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.


BACK TO TOP

Need more Honney

NDC Conferences

The NDC Conferences (Norwegian Developers Conference) are one of the world`s largest independent software conferences for .NET & Agile development. The conference covers everything you need to know within software development. The conferences are held each year in many places such as Oslo, Copenhagen, London, Sydney and Minnesota.

Update Conference Prague

Update Conference Prague is the biggest developer conference in the Czech Republic. The conference is offering sessions delivered by the top experts from all around the world. Their goal is to inspire the attendees and enrich their knowledge.

Troy Hunt

Learn about Web Security from Troy Hunt. He is a really engaged speaker that frequently give talks on conferences around the world. Troy is a Microsoft MVP and you can even learn from him on some great courses on Pluralsight.

W3Schools

W3Schools.com is a great education Web Site for learning web technologies. On W3Schools you may find well organized basic to advanced tutorials and references.

Scott Hanselman

Learn about Web Technologies and new trends from Scott Hanselman. Scott Hanselman is an author of developer books and he is an engaged speaker that usually talks about the Microsoft stack. You may meet Scott on conferences around the world.

Developer Week

DeveloperWeek is one of the world’s largest developer conferences. Developer Week focus on new dev technologies, the conference have talks and workshops for newbies and experienced audience. You can attend on a Developer Week conference different places in Nothern America.


BACK TO TOP

Honneybag blog



Learn JavaScript Debugging

Searching for bugs and fixing them is called code debugging. The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively. Bugs in the code might be syntax errors or logical errors. Sometimes nothing happens when the code contains bugs and there is few indications where to search. Modern web browser includes a powerful suite of developer tools. The tools do a range of things...

Explore JavaScript Arrays

Arrays are frequently used by developers. Programming languages can have slightly different implementation of arrays. An array is an object that can store a collection of items. You may say it`s a special variable that can have more than one value. The array holds many values under a single name, and you may access the values by referring to an index number. The easiest way to create....

Ultimate Guide to HTML Colors

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want. Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide....

Wanna be a sheep? Check out the most popular subjects
HONNEYBAG BLOG
HONNEYBAGBLOG INSPIRE-AND-BE-INSPIRED
HTML FORMATTING
JAVASCRIPT ESSENTIALS
HONNEYBAGBLOG EXPLORE-JAVASCRIPT-ARRAYS
Wanna be a little different? Check out the less popular subjects
HONNEYBAG BLOGER
HTML INTRODUCTION
HTML INTRODUCTION
HTML ESSENTIALS
HTML ESSENTIALSWE
BACK TO TOP