JavaScript_Event_Handling_Updated_______

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 anEvent? • - An event is a user action • - Examples: click, type, scroll • - Events occur in browser • - JavaScript can respond to them
• 4.
  What is EventHandling? • - Code that responds to events • - Can trigger functions • - Written using JavaScript • - Used to make pages interactive
• 5.
  Why Event Handlingis 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 • - JavaScripthandles browser events • - Events include click, type, hover, etc. • - Can use inline or JS code • - Makes web pages interactive
• 15.
  Questions / ThankYou • - Any questions? • - Thanks for your attention! • - JavaScript makes web fun! • - Happy coding!