Highlights of JavaScript — Button, Mouse, and Input Events

To learn JavaScript, we must learn the basics.

In this article, we’ll look at the most basic parts of the JavaScript language.

Button Events

We can add event handling code to buttons so that it can do something when we click it.

For example, we can write:

<input type="button" value="Click Me" onClick="alert('Hello world!');">

We have a button that has the onClick attribute with JavaScript code to call alert .

Therefore, we’ll see an alert box displayed when we click it.

The value attribute has the button text.

We can do the same for other elements.

For example, we can write:

<a href="http://google.com"><img onClick="alert('Hello world!');" src="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"></a>

When we click on the image, we see the alert box displayed.

If we want to make the code cleaner, we can put the alert call into its own function.

We can write the following HTML:

<a href="http://google.com"><img onClick="greet()" src="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"></a>

And the following JavaScript:

const greet = () => {
  alert('Hello world!');
}

Mouse Events

We can listen to mouse events by using attributes and set their values to JavaScript code.

For example, we can write:

<h1 onMouseover="alert('hello world.');">hello world</h1>

to show an alert box when we hover over the h1 element.

We can also add the onMouseout event handler to do something when we hover over the element and then reverse it when we move the mouse away from it:

<h1 onMouseover="this.style.color='green'" onMouseout="this.style.color='black'">hello world</h1>

this in the code above is the h1 element.

We set the color style to 'green' when we hover over the h1 element.

Then when we move the mouse away, then we set the color back to black.

Input Events

Likewise, we can listen to events emitted by the input element.

For example, we can write:

<input type="text" size="30" onFocus="this.style.backgroundColor = 'yellow';" onBlur="this.style.backgroundColor = 'white';">

We added the onFocus and onBlur handlers to set the backgroundColor style to 'yellow' when we focus on the input element.

Then when we move the cursor away from the input, it goes back to a white background.

Reading Field Values

We can read the value entered into the input field when we submit the form.

We can write the following HTML:

<form onSubmit="checkAddress('email'); return false;">
  Email:
  <input type="text" id="email">
  <input type="submit" value="Submit">
</form>

And the following JavaScript to check the email field:

const checkAddress = (fieldId) => {
  if (document.getElementById(fieldId).value === "") {
    alert("Email is required.");
  }
  return false;
}

The checkAddress function gets the value of the input with ID email .

Then if it’s empty, we see the 'Email is required' message in the alert.

We need the return false in the onSubmit attribute and the checkAddress function to prevent the default submit behavior.

We can clean up the function by writing:

const checkAddress = (fieldId) => {
  const {
    value
  } = document.getElementById(fieldId)
  if (value === "") {
    alert("Email is required.");
  }
  return false;
}

Conclusion

We can listen to button, mouse, and input events to listen to events from various input devices and do as we wish with them.