Before writing about the different types of event handlers, it is imperative that a bit of context is provided to how browsers generally register or capture web user behaviour.
Events and DOM nodes:
Without sounding too technical, DOM (Document Object Model) is a concept that explains how browsers retrieve and display the contents of a website. This concept helps browsers understand the different parts of a website’s page e.g. title, header and paragraphs. Event handlers can be set to track user behaviour in the different section of the web page. A good example would be trying to ascertain if a user clicks on a link in the first or second paragraph of your web page.
In the previous section, I briefly touched on the point that a web page is divided into different sections and you can analyse what section of a web page attracts the highest user engagement. A common question could be: are users clicking on a link or a button in the second paragraph of a page as against the first? This will help you optimise your page to enhance the engagement and overall experience of your users. On the other hand, event objects provide additional information about the actual user action. It is not just about clicking on a link or a button; it drills down to detect which mouse button (left, middle or right mouse button) was pressed.
Let’s now look at the different types of event handlers.
Key events: There are a variety of keys on a keyboard and understanding how users interact and run an internal search on your website will help you enhance the user experience. The browser triggers ‘Keydown’ when a key on a keyboard is pressed down and ‘Keyup’ is activated when the key is released. ‘Keypress’ is a third key event that takes place immediately after a key has been released and only applies to keys that produce character input. In essence, ‘Keypress’ is triggered when a user types characters such as alphabets, numbers and special characters as opposed to keys such as backspace, space, tab, up or down.
Mouse clicks: Similar to keys, a mouse button also leads to a triggering of an event in the browser. When you click your mouse, two common events will take place and they are ‘Mousedown’ and ‘Mouseup.’ They are both similar to the ‘keydown’ and ‘keyup’ events and help you understand what links or buttons are of the most interest to users via the mouse click behaviour.
I used the Mouseflow heat map software to analyse user click behaviour on one of my blogs on PPC. I discovered a user or visitor clicked on the link that leads to Google’s announcement of the removal of ads from the side panel.
Mouse motion: Whenever you move your mouse on a web page a ‘mouse-move’ event is fired. A common example takes place when you hover over a link or button without actually clicking. The image on the previous point highlighted a user clicking a link leading to Google’s announcement on the removal of ads from the side panel. We had a click to a link and two hovers or a mouse move. This led to a hover-click rate of 50%. That is, out of two people who looked interested in finding out more about the article, one clicked and the other continued reading my blog. This is a very important way to ascertain how compelling a website’s calls-to-action buttons are, as more mouse moves (hover) and fewer mouse clicks indicate a need to change the colour, font size or text of a call-to-action button or link.
Scroll: The scroll event is fired or triggered whenever a user scrolls your web page. This is quite important to understand if a section of your web page is of little or more interest to site visitors. If most users do not scroll to the bottom or lower section of your site, you might consider having your most important contents at the top half of the given page. My PPC blog below reveals the user scroll analysis. The blue line is the fold (the upper section of a page on a mobile device without scrolling). It indicates a certain number of users scrolled below the fold but not till the end of the page. This is quite useful in site and content optimisation.
Focus event: This is the last event and is triggered when an element or a section of a web page gains more user focus. It is sometimes viewed as an attention element. This helps you to determine if what you considered the most important section of your site is gaining the most attention or focus from users.
DOM Image credit: Marijn Haverbeke