3 Underused HTML Events to add flair to your site

It is increasingly hard to stand out on the web while being increasingly important to do so. Here I’ve gathered together 3 underused HTML events that you can listen for in JavaScript and add some flourish to your corner of the internet.

1. Change the page title when a user goes to another tab

When a user switches tab your website joins an ever-growing list of open tabs and there is a good chance they will never come back. If only you could still communicate with that user you may be able to win them back! This is where the ‘visibilitychange’ event steps in. This event ‘is fired at the document when the contents of its tab have become visible or have been hidden’ so we can respond to a user navigating to another tab as well as when they come back. Unfortunately, by definition when the tab contents are hidden there isn’t much we can show the user to lure them back. However, the trusty old document title remains. The snippet below replaces the document title with a plea to return when the user tabs away and then replaces it with a message of gratitude when they come back.

addEventListener('visibilitychange', () => {
	document.title =
		document.visibilityState === 'hidden' ? 'Please come back! 🙏' : 'Phew, we missed you 😌';
});

Make it your own

While the tab is not active there isn’t much you can show the user, but there is no limit to what you could do with this event when the user returns to your tab. Why not celebrate their return with some confetti?

2. Open a popup when a user copies some text

The keyboard shortcuts for copy and paste are perhaps the best known of all, but did you know that when a user copies (or cuts, or pastes) text on your page there is also an event dispatched that we can listen for?

If you are running an e-commerce site and the user copies the product title they may be looking to find the same product for a better price at a competitor’s store. You can preempt that lost sale by offering a discount to that user!

addEventListener('copy', () => {
	openDiscountPopup();
});

Make it your own

There are a whole host of reasons a user might be copying some text on your site. Maybe they didn’t know a complicated word meaning and were about to Google it; you could offer a tooltip with a definition. Maybe they want to save that blog article in a note somewhere; you could suggest they add it to their ‘favourites’. The better you understand your user’s intentions the better you can respond to their needs. Give some thought as to what might your users be doing after copying text from your site and what you can do to help them there and now.

3. Show some social media share buttons when a user highlights text

Similar to copying text, your users could be highlighting text on the page for a variety of reasons. Let’s imagine for this example that the user wants to share some snippet of your blog article on social media. With the snippet below we can trigger an interface to open with one-click options to share on Twitter, Facebook etc. You could even prepopulate the tweet with the text they’ve copied for them (and a link back to its source if you are feeling sneaky).

const article = document.querySelector('.article');
article.addEventListener('mouseup', () => {
	const text = getSelection().toString();
	if (text === '') return;
	showShareButtons(text);
});

Make it your own

Again, think about your users — why are they highlighting text? Once you get into the mind of your user you are only limited by your imagination as to the conveniences you can offer to them.

BONUS: Reward a user when they enter the Konami code

Just for fun, why not put some easter eggs on your site as well? The Konami code is an obvious one and doesn’t take too much to implement as you can see in the snippet below.

const pressedKeys = [];
const konamiCode = [
	'ArrowUp',
	'ArrowUp',
	'ArrowDown',
	'ArrowDown',
	'ArrowLeft',
	'ArrowRight',
	'ArrowLeft',
	'ArrowRight',
	'b',
	'a'
];
let timeout;
window.addEventListener('keyup', (e) => {
	clearTimeout(timeout);
	timeout = setTimeout(() => {
		pressedKeys.splice(0, pressedKeys.length);
	}, 2500);
	pressedKeys.push(e.key);
	if (pressedKeys.join('').includes(konamiCode.join(''))) {
		clearTimeout(timeout);
		alert('Congratulations! Please accept this trophy 🏆');
	}
});

Make it your own

A JavaScript alert may not be the most fun way to celebrate a user uncovering this easter egg. You could offer a small discount on certain items, add a badge to their profile (maybe include how quickly they input the code?) or send them an over-the-top email exulting their excellence.

Conclusion

Building and browsing the web should be fun, and I hope this article has given you some fresh ideas to take to your next project.

If you have any other ideas for how to use any of these events; or some novel ways to use events I haven’t listed please reach out and share your ideas.