Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
JavaScript gives you powerful control over events. You can stop the browser's default actions and control how events propagate through the DOM!
Stop browser default behavior
Stop event bubbling
Stop ALL handlers
const form = document.querySelector('#myForm');
form.addEventListener('submit', function(e) {
e.preventDefault(); // Stop page reload!
const formData = new FormData(form);
const name = formData.get('name');
console.log('Form submitted:', name);
// Now handle with JavaScript/AJAX
});const link = document.querySelector('#myLink');
link.addEventListener('click', function(e) {
e.preventDefault(); // Stop navigation!
const url = this.getAttribute('href');
console.log('Would navigate to:', url);
// Handle with JavaScript instead
alert('Navigation prevented!');
});const box = document.querySelector('#box');
box.addEventListener('contextmenu', function(e) {
e.preventDefault(); // Stop right-click menu
console.log('Custom context menu!');
// Show your own menu instead
});const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
child.addEventListener('click', function(e) {
console.log('Child clicked');
e.stopPropagation(); // Stop here!
});
parent.addEventListener('click', function() {
console.log('Parent clicked');
// This will NOT run when child is clicked
});const button = document.querySelector('#btn');
// First handler
button.addEventListener('click', function(e) {
console.log('Handler 1 executed');
e.stopImmediatePropagation(); // STOP ALL!
});
// Second handler - WON'T RUN!
button.addEventListener('click', function() {
console.log('Handler 2 executed');
});
// Third handler - WON'T RUN!
button.addEventListener('click', function() {
console.log('Handler 3 executed');
});Stops browser's default action
Stops event bubbling
Stops ALL handlers
preventDefault() for forms (prevent reload) and stopPropagation() for nested elements. Use stopImmediatePropagation() sparingly when you need complete control!