Table of Contents
It’s been a time since we talked about what JavaScript exist and how you can use them to make your plans and wishes come true. To remember the material we discussed earlier, here is part 1, part 2 and part 3. Even though we explored a lot of things, few are still remaining. So, today our focus will be on events related to mouse. With coming of HTML5 this “category” of events grew on size a bit. Without further ado, let’s begin!
onclick
Let’s start with something you are familiar with, even if you never approached JavaScript events before. onclick event is triggered (or fired up) every time when you click on something on the page. For example, to catch click event on button you would select the button, either by class, id or tag and then use onclick with function containing the code to be executed like checking the subscription form.
JavaScript:
document.getElementById(“js-button”).onclick = function(e) {
// creating variable for name input
var nameField = document.getElementById(“js-name”);
// creating variable for email input
var emailField = document.getElementById(“js-email”);
// checking for the length of value of input fields
if (nameField.value.length === 0 || emailField.value.length === 0) {
// prevent submiting of the form – reason for e parameter in onclick function
e.preventDefault();
// showing alert popup
alert(“Please check your name and adress.”);
}
}
note: This works only with left button. For the right you can use oncontextmenu event.
ondblclick
This event works in the same fashion as “regular” onclick event except that, as the name says, you have to click twice. Let’s add a new class “clicked” to div on double click.
JavaScript:
// selecting the div – it is first div on the page -> index 0 in returned array – and use ondblclick event
document.getElementsByTagName(“div”)[0].ondblclick = function() {
// adding (toggling) new class to this div
this.classList.toggle(“clicked”);
}
onmousedown & onmouseup
We will take these two events at once since one follows the other. When you click the mouse button (left or right), onmousedown event is triggered. On the other hand, when you release the button the event that is triggered is onmouseup. I hope that it is not needed to note that onmousedown fires as first and onmouseup as second.
JavaScript:
// again, we are selecting the div and use onmousedown event
document.getElementsByTagName(“div”)[0].onmousedown = function() {
// adding (toggling) new class to the div
this.classList.toggle(“clicked”);
}
// now, we are selecting the div again, but using onmouseup event
document.getElementsByTagName(“div”)[0].onmouseup = function() {
// adding (toggling) new class to the div
this.classList.toggle(“released”);
}
onmouseover & onmouseout
Next two events to explore are also connected to each other. Unlike the previous ones, these are triggered when you mouse over some element (onmouseover) or you move the cursor from that element (onmouseout). For example, let’s change the background of div when onmouseover and switch it back to default color on onmouseout.
JavaScript:
document.getElementsByTagName(“div”)[0].onmouseover = function() {
// changing the background – hexadecimal value have to be in quotes
this.this.style.background = “#3498db”;
}
document.getElementsByTagName(“div”)[0].onmouseout = function() {
// switching to default color – let's say it is #2ecc71
this.style.background = “#2ecc71”;
}
onmousemove
I don’t now many situations when you could use this event in a good way to benefit the users. Why? Well, this event is fired every time when mouse moves. I mean every time for every millimeter, so just by hovering over some element you can fire this event for dozen or hundred times. OK … How about to show x and y coordinates when moving the mouse across the page?
JavaScript:
// select document object and use the onmousemove event with e as parameter – we will use it to check for coordinates
document.onmousemove = function(e) {
console.log(e.offsetX + “px ” + e.offsetY + “px”);
}
HTML5 comes to play
Now, all the events from HTML4.01 are behind us and it is time to introduce you to events included in HTML5.
onscroll
Whenever you use the scrollbar, either on element or page, onscroll event is triggered. For example, let’s change the text of paragraph when user scrolls the document object (page).
JavaScript:
// select the document and use onscroll event
document.onscroll = function() {
selecting paragraph and changing the text
this.getElementsByTagNames(“p”)[0].innerHTML = “Scrolling!”;
}
onwheel
Another event close to scrolling is onwheel. This event will be triggered every time you will use the mouse wheel, no matter if document is scrolling (scrollbar is present). Just to demonstrate how to use this event you can create new list item inside the list every time the user will use mouse wheel. Funny right?
JavaScript:
// select the document and use onwheel event
document.onwheel = function() {
// select the list and store it into variable
var list = this.getElementsByTagName(“ul”)[0];
// create new list item and store into varible
var item = this.createElement(“”li”);
// create the text that will be displayed in list item and store it into varible
var itemText = this.createTextNode(“List item”);
// now add text to list item
item.appendChild(itemText);
// and finally add list item to list
list.appendChild(item);
};
– note: onwheel event is supported only in Chrome (31+), Firefox (17+) and Opera (18+).
Dragging
The last category of events I want to explore with you today are events related to drag and drop. Because this API require deeper exploration in order to understand all of its features and to be able to work with them, we are going to only take a look at what events are available and we can we work with. However, you don’t need to worry. In future I will create separate tutorial just for this amazing feature of HTML5.
Drag & drop API includes these events related to draggable element – ondrag, ondragstart and ondragend. For drop elements you can use ondragenter, ondragover, ondragleave and finally ondrop. Before you can drag some element, you have to add an HTML attribute draggable to it and set it to “true”. Without this, it will not work.
Summary
We talked about some pretty interesting events and also tried them on some examples. In next part we will continue in exploration of the world of events and look at the remaining ones. Also, expect a tutorial on drag & drop API soon. Thank you for your time.
If you liked this article, please subscribe so you don't miss any future post.
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
