JavaScript Events (Events)

Events are operations that occur in the browser, which can be initiated by the user or the browser itself.

The following are some examples of common events that may occur on a website:

• The page is loaded

• The user clicks a button

• The user scrolls the document

• The user adjusts the browser size

• The user moves the mouse

• The user submits a form

• A key is pressed on the keyboard

• HTML input field has changed

Each available event has aevent handler, theevent handleris a code block (usually a user-defined JavaScript function) that runs when an event is triggered.

By understanding events, you will be able to provide end users with a more interactive web experience.

A simple example

When an event is triggered, such as when a user clicks a button, a block of JavaScript code can be executed.

In the following example, we have a button that, when pressed, will callshowDate()Function:

<button onclick="showDate()">Click me</button>

JavaScript showDate()The function is as follows:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

Ways to use events

Events can be assigned to elements in three ways so that they can be executed when associated events are triggered:

• Inline event handlers

• event handler attribute

• Event listeners

We will introduce all three methods to ensure you are familiar with each way to trigger an event.

inline event handler attributes

To assign an event to an HTML element, we can useHTML event attributes.

In the following example, when the user clicks<p>The content of the element will change when

<p onclick="this.innerHTML = 'Hello world'">Click here to change this text</p>

In the following example, when the user clicks<p>A function will be called when the element is clicked:

<p onclick="changeText(this)">Click here to change this text</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

In the following example, we have a button that, when pressed, will change the background to a random color:

<button onclick="bgChange()">Click me</button>
<script>
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}
</script>

Inline event handlers are a simple way to start understanding events, but they should not be used for purposes other than testing and education.

event handler attribute

The next step in inline event handlers isevent handler attribute. This is very similar to inline handlers, except that we set the element's attributes in JavaScript instead of in the HTML.

In the following example, we will assign an onclick event to the HTML element with id "para":

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

We can also set the event handler attribute to be equal to the name of the named function:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

In the above example, the namechangeTextthe function assigned to the element withid="para"of the HTML element.

This function will be executed when the element is clicked.

In the following example, we have a button that, when pressed, will change the background to a random color:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

Note:event handlernot followedMost JavaScript code follows the camelCase naming convention. Note that the code isonclick, notonClick.

onfocus and onblur events

onfocus is triggered when the element gains focus.

onblur is triggered when the element loses focus.

<input type="text" onfocus="func1(this)" onblur="func2(this)>

onchange Event

onchange is triggered when the value of the element changes.

<input type="text" onchange="myFunc(this)" value="Hello">

onmouseover and onmouseout events

onmouseover is triggered when the pointer device (usually the mouse) is moved over the element or one of its child elements.

onmouseout is triggered when the pointer device (usually the mouse) is moved away from the element or one of its child elements.

Further Reading

HTML Reference:HTML Event Attribute Reference

JavaScript Reference:HTML DOM Event Object Reference