Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Events are things that happen on your webpage - clicks, key presses, mouse movements. You can listen for these events and run code when they occur!
Event travels down from window to target
Event reaches the actual element clicked
Event travels back up to window
User clicks on the button - event is created
// User clicks button
const button = document.querySelector('#clickBtn');
button.addEventListener('click', function() {
const box = document.querySelector('#box');
box.textContent = 'Button Clicked! ' + new Date().toLocaleTimeString();
box.style.backgroundColor = '#10b981';
});const form = document.querySelector('#myForm');
const input = document.querySelector('#nameInput');
input.addEventListener('input', function(e) {
const output = document.querySelector('#output');
output.textContent = 'Typing: ' + e.target.value;
});
form.addEventListener('submit', function(e) {
e.preventDefault();
alert('Form submitted!');
});const area = document.querySelector('#mouseArea');
area.addEventListener('mouseenter', function() {
this.style.backgroundColor = '#10b981';
this.textContent = 'Mouse Entered! 🎉';
});
area.addEventListener('mouseleave', function() {
this.style.backgroundColor = '#e2e8f0';
this.textContent = 'Hover over me!';
});const input = document.querySelector('#keyInput');
const display = document.querySelector('#keyDisplay');
input.addEventListener('keydown', function(e) {
display.textContent = 'Key: ' + e.key + ' | Code: ' + e.code;
if (e.key === 'Enter') {
display.style.backgroundColor = '#10b981';
} else {
display.style.backgroundColor = '#3b82f6';
}
});