Scribd
Upload
34 views2 pages

Javascript Events Quick Notes

This document serves as a comprehensive reference for JavaScript events, detailing their categories, syntax, and practical use cases. It includes examples of event handling methods such as inline, DOM level, and addEventListener. Additionally, it provides a comparison table of various events and their real-life applications, enhancing quick revision for developers.

Uploaded by

arjuxolo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views2 pages

Javascript Events Quick Notes

This document serves as a comprehensive reference for JavaScript events, detailing their categories, syntax, and practical use cases. It includes examples of event handling methods such as inline, DOM level, and addEventListener. Additionally, it provides a comparison table of various events and their real-life applications, enhancing quick revision for developers.

Uploaded by

arjuxolo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

JavaScript Events – Quick Notes

This PDF contains a complete reference for JavaScript events including categories, syntax,
comparison tables, and real-life use cases for quick revision.

Event Syntax Examples


Inline <button onclick="alert('Hello!')">Click</button>
DOM Level document.getElementById("btn").onclick = function(){ alert("Clicked!"); };
addEventListener (Best) document.getElementById("btn").addEventListener("click", () => alert("Clicked!"));

Comparison Table of Events


Category Event When it Fires Example
Mouse click Single mouse click el.addEventListener("click", fn)
Keyboard keydown Key pressed document.addEventListener("keydown", fn)
Form submit Form submitted form.addEventListener("submit", fn)
Window resize Window resized window.addEventListener("resize", fn)
Clipboard copy Copy action document.addEventListener("copy", fn)
Drag & Drop drop Item dropped zone.addEventListener("drop", fn)
Touch touchstart Finger touches screen document.addEventListener("touchstart", fn)
Media play Media starts playing video.addEventListener("play", fn)
Animation animationend Animation ends el.addEventListener("animationend", fn)
Rare online Browser goes online window.addEventListener("online", fn)

Real-Life Use Cases


Category Event Real-Life Use Case
Mouse click Toggle dark mode, submit form
Keyboard keyup Validate input after typing
Form input Live search suggestions
Window scroll Infinite scroll feed
Clipboard paste Paste Excel data into form
Drag & Drop dragover/drop File upload (Google Drive)
Touch touchmove Swipe gestures on mobile
Media timeupdate Update video progress bar
Animation transitionend Run code after sidebar animation
Rare mutation observerDetect new chat messages

You might also like