JavaScript_Event_Handling_Updated_______
- 1. JavaScript Event Handling • Making Web Pages Interactive • - Created using JavaScript • - Responds to user actions • - Makes pages dynamic • - Your Name / Roll No / Date
- 2. Introduction to JavaScript • - JavaScript is a scripting language • - Adds behavior to web pages • - Used for interactivity • - Works with HTML & CSS
- 3. What is an Event? • - An event is a user action • - Examples: click, type, scroll • - Events occur in browser • - JavaScript can respond to them
- 4. What is Event Handling? • - Code that responds to events • - Can trigger functions • - Written using JavaScript • - Used to make pages interactive
- 5. Why Event Handling is Important • - Makes pages dynamic • - Responds to user inputs • - Allows real-time interaction • - Improves user experience
- 6. Inline Event Handling • - Directly in HTML tag • - Easy to use for small scripts • - Uses attributes like onclick • - Example: • <button onclick="alert('Hello!')">Click Me</button>
- 7. JavaScript Function Example • - JavaScript functions respond to events • - Called inside onclick or other attributes • - Easy way to separate logic • - Example: • function sayHi() { alert('Hi!'); }
- 8. Common JavaScript Events • - onclick: when user clicks • - onmouseover: mouse over element • - onkeydown: key press • - onchange: input field changes
- 9. Mouse Events • - onclick: click element • - ondblclick: double click • - onmouseover: mouse over element • - onmouseout: mouse leaves element
- 10. Keyboard Events • - onkeydown: key is pressed down • - onkeyup: key is released • - onkeypress: key is pressed and held • - Useful in forms or games
- 11. The addEventListener() Method • - Better than inline handlers • - Can attach multiple events • - More flexible and cleaner • - Syntax: element.addEventListener('event', function)
- 12. onclick vs. addEventListener() • - onclick: simple and quick • - addEventListener: more powerful • - addEventListener allows multiple listeners • - Better for large apps
- 13. Real-life Examples • - Button click shows message • - Typing triggers search • - Hover changes background • - Scrolling loads more content
- 14. Summary • - JavaScript handles browser events • - Events include click, type, hover, etc. • - Can use inline or JS code • - Makes web pages interactive
- 15. Questions / Thank You • - Any questions? • - Thanks for your attention! • - JavaScript makes web fun! • - Happy coding!