Javascript Browser Events.pdf
- 1. Introduction to Browser Events Shubham Chaurasia (schaurasia@)
- 2. AGENDA ● What is Event? ● Event Handlers and Listeners ● Event Object ● DOM Event Architecture ● Event Phases ● Multiple Event Listener ● Event Delegation ● Conclusion
- 4. ● An action that is fired (initiated) within a web page. ● In browsers everything starts by following an event. ● JavaScript uses asynchronous callback. ● The event could be the DOM is loaded(window.onload), or an asynchronous request that finishes fetching(xhr.onreadystatechange), or a user clicking an element or scrolling the page, or the user types on the keyboard. What is Event?
- 6. You can respond to any event using an Event Handler, which is a function that’s called when an event occurs. There are 3 ways to register event handlers ● Inline event handlers (Old way) <a href="site.com" onclick="dosomething();">A link</a> Will be tedious job if you want to attach the events to 100 anchor tags. ● DOM on-event handlers (Easy way) var el = document.getElementById(‘foo’); el.onclick = doSomething; This is common when an object has at most one event handler, as there is no way to add multiple handlers in this case. but better cross-browser compatibility ( IE ) Event Handler
- 7. Event Handler ● Using addEventListener and attachEvent (Right way) var el = document.getElementById(‘foo’); el.addEventListener(‘click’, doSomething); el.attachEvent(‘click’, doSomething); ( In Internet Explorer ) This is the modern way and follows w3c standard. This method allows to register as many handlers as we need. You can use removeEventListener and detachEvent(IE) to remove the event handler. This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. This allows you to have the same button performing different actions in different circumstances — all you've got to do is add/remove event handlers as appropriate. You can also register multiple handlers for the same listener.
- 8. Event Object
- 9. ● Contains contextual information about the current event. ● An object that’s provided, or is available, inside of every event handler function. ● W3C Standard Browser: e ● Internet Explorer: window.event ● This object contains a lot of useful properties and methods, like: ○ target, the DOM element that originated the event ○ currentTarget ○ type ○ stopPropagation() ○ preventDefault() ○ path and many more Event Object
- 12. Two Models Not surprisingly, back in the bad old days Netscape and Microsoft came to different conclusions. 1. Netscape said that the event on element1 takes place first. This is called event capturing. 2. Microsoft maintained that the event on element2 takes precedence. This is called event bubbling. DOM Event Architecture
- 13. attachEvent(‘click’, handler) addEventListener(‘click’, handler, true); Event Capturing
- 14. Event Bubbling
- 15. W3C has very sensibly decided to take a middle position in this struggle. Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again. W3C Model
- 16. W3C DOM Event Architecture
- 17. IE events are stacked element.attachEvent('onclick', function(){ alert(‘1’); }) element.attachEvent('onclick', function(){ alert(‘2’); }) W3C events are queued element.addEventListener('click', function(){ alert(‘1’); }) element.addEventListener('click', function(){ alert(‘2’); }) Multiple Event Listener
- 18. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements. Let’s also say that something needs to happen when each child element is clicked. You could add a separate event listener to each individual LI element, but what if LI elements are frequently added and removed from the list? Adding and removing event listeners would be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent UL element Event Delegation
- 19. Conclusion
- 20. Thank You!