Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
JavaScript provides many event types for different interactions. Understanding which event to use helps you build responsive applications!
Click, hover, drag
Key presses, typing
Input, submit, change
Load, resize, scroll
const button = document.querySelector('#btn');
// Single click
button.addEventListener('click', function() {
console.log('Single click!');
});
// Double click
button.addEventListener('dblclick', function() {
console.log('Double click!');
});const box = document.querySelector('#hoverBox');
box.addEventListener('mouseenter', function() {
this.style.backgroundColor = '#10b981';
this.textContent = '🎉 Mouse is inside!';
});
box.addEventListener('mouseleave', function() {
this.style.backgroundColor = '#94a3b8';
this.textContent = '👋 Mouse left!';
});const area = document.querySelector('#moveArea');
area.addEventListener('mousemove', function(e) {
const x = e.offsetX;
const y = e.offsetY;
const output = document.querySelector('#coords');
output.textContent = `X: ${x}, Y: ${y}`;
});const input = document.querySelector('#keyInput');
input.addEventListener('keydown', function(e) {
console.log('Key pressed: ' + e.key);
});
input.addEventListener('keyup', function(e) {
console.log('Key released: ' + e.key);
});const input = document.querySelector('#textInput');
// Fires on every keystroke
input.addEventListener('input', function(e) {
console.log('Input: ' + e.target.value);
});
// Fires when user commits (blur/enter)
input.addEventListener('change', function(e) {
console.log('Changed: ' + e.target.value);
});const input = document.querySelector('#focusInput');
input.addEventListener('focus', function() {
console.log('Input focused!');
this.style.borderColor = '#10b981';
});
input.addEventListener('blur', function() {
console.log('Input blurred!');
this.style.borderColor = '#cbd5e1';
});const container = document.querySelector('#scrollBox');
container.addEventListener('scroll', function() {
const scrollTop = this.scrollTop;
const scrollHeight = this.scrollHeight;
const clientHeight = this.clientHeight;
const percentage = Math.round(
(scrollTop / (scrollHeight - clientHeight)) * 100
);
console.log('Scrolled: ' + percentage + '%');
});click - Single clickdblclick - Double clickmouseenter - Mouse entersmouseleave - Mouse leavesmousemove - Mouse movesmousedown - Button pressedmouseup - Button releasedinput - Value changes (live)change - Value committedsubmit - Form submittedfocus - Element focusedblur - Element unfocusedkeydown - Key pressedkeyup - Key releasedkeypress - Character typed (deprecated)load - Page fully loadedresize - Window resizedscroll - Page scrolledbeforeunload - Before leaving pageinput for live feedback, change for committed values, mouseenter for hover effects!