Events Programs

click, submit, bubbling. addEventListener. Not onclick= in the HTML.

10 programs · open one, then the next

Start with DOM Events Basics

01DOM Events BasicsBeginnerBasic DOM event handlingOpen example →js// Method 1: Inline event handler (not recommended) // <button onclick="handleClick()">Click</button> // Method 2: addEventListener (recommended)
02Custom EventsIntermediateCreate and dispatch custom eventsOpen example →js// Method 1: Create custom event const customEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello from custom event', data: 123 }, bubbles: true,
03Event Bubbling and CapturingIntermediateUnderstand event propagation phasesOpen example →js// Event Bubbling (default) // Event flows from target to root const parent = document.getElementById('parent');
04Event DelegationIntermediateHandle events on parent elementOpen example →js// Method 1: Basic event delegation const list = document.getElementById('myList'); // Instead of adding listener to each item
05Keyboard EventsBeginnerHandle keyboard input eventsOpen example →js// Method 1: Keydown event document.addEventListener('keydown', function(e) { console.log('Key pressed:', e.key); console.log('Key code:', e.keyCode);
06Mouse EventsBeginnerHandle mouse interaction eventsOpen example →js// Method 1: Click events const button = document.getElementById('myButton'); button.addEventListener('click', function(e) {
07Form EventsBeginnerHandle form submission and input eventsOpen example →js// Method 1: Form submission const form = document.getElementById('myForm'); form.addEventListener('submit', function(e) {
08Window EventsIntermediateHandle window and page eventsOpen example →js// Method 1: Load event window.addEventListener('load', function() { console.log('Page fully loaded'); // All resources loaded
09Touch EventsIntermediateHandle touch events for mobile devicesOpen example →js// Method 1: Basic touch events const element = document.getElementById('myElement'); element.addEventListener('touchstart', function(e) {
10Drag and Drop EventsAdvancedImplement drag and drop functionalityOpen example →js// Method 1: HTML5 Drag and Drop API const draggable = document.getElementById('draggable'); const dropzone = document.getElementById('dropzone');