Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

Javascript Events Tutorial – How Web Developers Respond to User Input

332.6K views on YouTube

Simple Javascript Events Tutorial with code! Almost every Web Developer finds themselves needing to respond to user actions on a page by changing content or adjusting the page display somehow. The way you do that is by listening to Javascript events.

VIEW THE CODE:
– addition: http://codepen.io/anon/pen/vOeeqG?editors=101
– pic link: http://codepen.io/anon/pen/vxYxKN?editors=101

Popular Javascript Events Are:
– click
– mouseenter
– mouseleave
– mousedown
– mouseup
– mousemove
– keydown
– keyup
– blur
– focus

See list of all javascript events here: https://developer.mozilla.org/en-US/docs/Web/Events

In this lesson, we’ll add event listeners to html elements. When the users click, focus, blur, press a key, or move their mouse, javascript will get notified and we can make the webpage change.

Listening to Javascript events is a bread and butter task for web development and web developers.

-~-~~-~~~-~~-~-
Also watch: “Responsive Design Tutorial – Tips for making web sites look great on any device”

-~-~~-~~~-~~-~-