JavaScript 101-#18 – Getting to know JavaScript events Pt2

Yesterday we took a look at what JavaScript events are and how do they work. I was not planning on making this sequel at first, but based on your feedback and recommendations I decided to create this sequel-like post in the end. Previous post was focused on broad theory and if you are not familiar with JavaScript events, you should read that one first because this post will be more about individual events and what they are responsible for. To try codes below you can use online IDEs like Codepen.io and JSBin.com. JSBin might be better choice since it also offers built-in console. Without further ado, let’s start …

First thing we have to do is to setup our canvas or playground. We can make this part easier by using the form we created in previous part. It had very simple structure containing one input for mail and one button element. Input element will have id of “js-mail”, type will be set to “email”, placeholder to “Enter your email address” and also “required” attribute. Button element will have id of “js-button”, type ”submit”, value and text between the tags will be “Submit” and role attribute set to “button”. This whole will be wrapped inside form with id “js-form”, action “submit.php” and method set to “post”.

HTML:

<form id=”js-form” action=”submit.php” method=”post”>
 <input id=”js-email” type=”email” placeholder=”Enter your email address” required />
 <button id=”js-button” type=”submit” value=”Submit” role=”button”>Submit<>
</form>

You can also style the overall design of form to make the practice more comfortable. I will try to make it quick so we can focus on JavaScript. To make the CSS code more readable, we will divide it into three sections. First will be for typography. Here we will set the font-size for body element to “16px” and font-family for input and button to “sans-serif”.

CSS:

/*=Typography=*/
body {font-size: 16px;}
input,
button {font-family: sans-serif;}

Next section will for layout and it will contain only universal selector (with its :before and :after pseudo-classes) with box-sizing property set to “border-box”.

CSS:

/*=Layout=*/
*,
*:before,
*:after {box-sizing: border-box;}

The last section will be solely for form and it will start by setting the overall width of form to “250px”. Next, style input and button elements by setting their margin to “.25em 0” so there is some white space between them. Padding will be “.5em” for all sides. To spread the elements across whole form, let’s set the width to “100%” and also remove border and outline by setting their values to “0”.

CSS:

/*=Form=*/
form {width: 250px;}
input,
button {
 margin: .25em 0;
 padding: .5em;
 width: 100%;
 border: 0;
 outline: 0;
}

Now let’s style the input field for email a bit more by setting its background to “none”, border-bottom to “.1em solid #333” and transition to “border-bottom-color .25s”. For “:focus” state change the border-bottom-color to “#737373”.

CSS:

input {
 background: none;
 border-bottom: .1em solid #333;
 transition: border-bottom-color .25s;
}
input:focus { border-bottom-color: #737373; }

Button will have font-weight set to “bold”, background to “#333”, color to “#fff”, cursor to “pointer” and transition to “background .25s”. For “:hover” state let’s change the background to “#262626” and “#404040” for “:active”.

CSS:

button {
 font-weight: bold;
 background: #333;
 color: #fff;
 cursor: pointer;
 transition: background .25s;
}
button:hover { background: #262626; }
button:active { background: #404040; }

Now, after setting up the styles, we can jump into JavaScript and practice working with events. Since we have form ready, the first events we will tackle are available for forms. Before we start exploring individual events, let’s create three variables and associate them with form, input and button. To get this done use “document” object and “getElementById()” method with value of id attribute as a parameter for each element.

JavaScript:

var form = document.getElementById("js-form");
var email = document.getElementById("js-email");
var button = document.getElementById("js-button");

Events working with input fields are “onfocus”, “onblur”, “onchange”, “oninput”, “onsearch” and “onselect”. First two events – “onfocus” and “onblur” – are closely connected. How? When you select some element, it gets focus – “onfocus” event is triggered. On the other hand, when you select another element, “onblur” event is triggered (element is “deselected”). These events can be used, for example, for showing hidden span with instructions for user by adding a class to it. You can then use “onblur” to remove the class later.

JavaScript:

// adding class on focus
email.onfocus = function() {
 document.getElementById(“js-span”).classList.add(“visible”);
};
// removing class on blur
email.onblur = function() {
 document.getElementById(“js-span”).classList.remove(“visible”);
};

“onchange” and “oninput” events works in similar way except one important thing. “onchange” event is triggered only when user change the value of the element and deselected it while “oninput” is triggered every time when the value is changed. For example, you are going to use these two events on input field for email to show some message.

JavaScript:

// onchange case
email.onchange = function() {
 alert(“Thanks”);
};
// oninput case
email.oninput= function() {
 alert(“Thanks”);
};

In the first case, message will be shown only once – when user change the value of input field and deselected it. In the second case, message will be show every single time user will change the value. If his email contain six characters, it will be shown six times – every time he presses the key. Pretty annoying, right?

“onsearch” event works only with input type of “search” and it is triggered when you search for something. “onselect” event is triggered any time when you select some text. You can use it on any element you want. How about to display a confirmation to change entered email address?

JavaScript:

// oninput case
email.onselect= function() {
 confirm(“Do you want to change your address?”);
};

When it comes to forms, you can also use “onsubmit” event, which is triggered everytime the form is submitted. For example, you can prevent multiple submitting by disabling the button after user submit the form for the first time.

JavaScript:

form.onsubmit = function() {
 button.disabled = true;
};

Next group of events is the one related to keyboard. These are “onkeydown”, “onkeypress” and “onkeyup”. The difference between them is very small. For example, with input field, “onkeydown” and “onkeypress” are fired up before the character is displayed, while “onkeyup” after displaying the character. The exact order is “onkeydown”, “onkeypress” and “onkeyup”.

Summary

Let’s end it up here for today. We learned something about events we can use with forms. In the next part we will get to know events related to mouse and window.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal