JavaScript — More Fun With DOM Events

Gerald Clark
5 min readJul 21, 2024

--

In the last article I covered a few events and in this one I want to cover a few more and talk about some useful ways to interact with the browser. Lets go!

Here is a super basic HTML document. In the body I have a p tag with a class called “copy-me”, a div with a class of “box, and several other p tags. Up in the head I have a basic style set up for anything with the box class. This style creates a box on the web page.

So the reason I called the first p tag’s class “copy-me” is because I want to cover the copy event first. This happens when we highlight something on the web page, right click and then select “copy”.

First I have to gain access to that element via the document.querySelector() and then simply add a listener that is looking for the ‘copy’ event.

So doing this, should print out the console.log message I put in the callback function.

Next I’ll cover the ‘mouse move’ event. I’m gonna move my mouse around in this box I made. Every time the mouse moves it will print out the X and Y coordinates of the mouse within that box.

Here I’ve gained access to the element with the box class. Set up the event listener to use the event data (e) and I’m just logging that to the console. So when the mouse moves inside the box, a message should print in the console.

You can see that its basically constantly printing new messages. So now I want some of the information inside that event object. So if I go down to the offsetY and offsetX you’ll see some values. Those values represent the mouse’s position WITHIN THE BOX. The offsetX is the mouse’s position from the left side of the box and the offsetY is the mouse’s position from the top of the box.

So now I want to output those values inside the box. This is why I wanted the event data in the callback function.

SO now I can log e.offsetY and X.

You’ll see here that as my mouse gets closer to the top left corner the values decrease and as I approach the bottom right they increase.

This bit of code allows me to output the values within the box. I’m accessing the textContent property. This is actually

at first, but I’m overriding it once the mouse moves within the box. Like so:

So now if you ever need to track where the user’s cursor is on the webpage, this is how you can do that.

The next event is going to be the scroll wheel event. I have added a lot more p tags to the document so I can get a scroll bar on the side.

To do this I won’t be accessing a specific element on the web page, but instead I’ll be accessing the document itself.

I’ve done the same thing I’ve done for the elements here. Im logging the event data to the console every time a ‘wheel’ event happens.

Inside these WheelEvent objects you’ve got some properties you can use. For this demonstration I’ll be using the pageX and pageY. This acts just like the offsetX and offsetY of the box we used earlier. The only difference is that the values are relative to the entire page.

So I can log out the position of the mouse relative to the entire page using the scroll event like this.

As you can see here, as the page scrolls, my Y value will change even if it is the same spot on the screen. This is because it has technically moved down on the page. Here is a link to a huge list of events we can use for future reference. https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events

The next article will cover how I will go about creating a pop up on a web page. See ya there!

--

--