Latest web development tutorials
×

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript usage JavaScript Output JavaScript grammar JavaScript Statement JavaScript Notes JavaScript variable JavaScript type of data JavaScript Object JavaScript function JavaScript Scope JavaScript event JavaScript The string JavaScript Operator JavaScript Comparison JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type conversion JavaScript Regular Expressions JavaScript error JavaScript debugging JavaScript Variable promotion JavaScript Strict mode JavaScript Use errors JavaScript Form validation JavaScript Keep the keyword JavaScript JSON JavaScript void JavaScript Code specification

JS function

JavaScript Function definition JavaScript Function parameter JavaScript Function call JavaScript Closure

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM event DOM EventListener DOM element

JS Advanced Tutorial

JavaScript Object JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop-ups JavaScript Timing events JavaScript Cookies

JS Library

JavaScript Library JavaScript test jQuery JavaScript test Prototype

JS Examples

JavaScript Examples JavaScript Object instance JavaScript Browser object instance JavaScript HTML DOM Examples JavaScript to sum up

JS Reference Manual

JavaScript Object HTML DOM Object

JavaScript Events

HTML events took place on the HTML element things.

When using JavaScript in HTML pages, JavaScript can trigger these events.

HTML Event

HTML event can be browser behavior can also be user behavior.

The following are examples of HTML event:

  • HTML page finishes loading
  • When HTML input field changes
  • HTML button is clicked

Typically, when an event occurs, you can do something.

When an event is triggered JavaScript can execute some code.

HTML elements can be added to an event attribute using JavaScript code to add HTML elements.

apostrophe:

<Some-HTML-element some- event = 'some JavaScript'>

Double quotes:

<Some-HTML-element some- event = "some JavaScript">

In the following example, a button element added onclick attribute (plus code):

Examples

<Button onclick = 'getElementById ( "demo"). InnerHTML = Date ()'> The time now is ?? </ button>

try it"

The above example, JavaScript code content id = "demo" element.

In the next example, the code will modify the content of the element itself (using this .innerHTML):

Examples

<Button onclick = "this.innerHTML = Date ()"> The time now is? </ Button>

try it"

Note JavaScript code is usually a few lines of code. More common is invoked by the event properties:

Examples

<Button onclick = "displayDate ()"> The time now is? </ Button>

try it"

Common HTML event

Here is a list of some common HTML event:

event description
onchange HTML element changes
onclick A user clicks on an HTML element
onmouseover The user moves the mouse on an HTML element
onmouseout Users move the mouse from an HTML element
onkeydown User presses a key
onload The browser has finished loading the page

More Event list: the JavaScript Reference - HTML DOM event .

JavaScript What can be done?

Events can be used to handle form validation, the user inputs, user behavior and browser actions:

  • Event is triggered when the page loads
  • Event is triggered when the page Close
  • User clicks a button to perform an action
  • Verify the legitimacy of user input
  • and many more...

You can use a variety of methods to execute JavaScript event code:

  • HTML event attributes can execute JavaScript code directly
  • HTML event attributes can call the JavaScript function
  • You can specify your own event handler for HTML elements
  • You can prevent the occurrence of an event.
  • and many more...
Note In the HTML DOM chapter you will learn more about the event and the event handler knowledge.