Created
June 24, 2011 12:50
-
-
Save kaaes/1044704 to your computer and use it in GitHub Desktop.
Event delegation blog post gists
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| interface EventTarget { | |
| void addEventListener(in DOMString type, | |
| in EventListener listener, | |
| in boolean useCapture); | |
| }; | |
| var link = document.getElementById('#myLink'); | |
| // use bubbling: | |
| link.addEventListener('click', callbackFnForClick, false); | |
| // use capturing | |
| link.addEventListener('click', callbackFnForClick, true); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var container = document.getElementById('myCont'); | |
| container.addEventListener('click', clickCallbackFn, false); | |
| // or | |
| delegate('click', container, 'a', clickCallbackFn); | |
| // where delegate can look like this | |
| function delegate(eventType, elementToBind, delegateTo, callbackFn) { | |
| // modern browser | |
| if (elementToBind.addEventListener){ | |
| elementToBind.addEventListener(eventType, function(evt){ | |
| // again this is very primitive and lets you | |
| // to operate only on tag selectors | |
| if(evt.target.nodeName.toLowerCase() === delegateTo.toLowerCase()) { | |
| // call callbackFn in context of evt.target with proper arguments | |
| callbackFn.call(evt.target, evt); | |
| } | |
| }, false); | |
| // IE | |
| } else if(elementToBind.attachEvent) { | |
| elementToBind.attachEvent('on' + eventType, function(evt){ | |
| if(evt.srcElement.nodeName.toLowerCase() === delegateTo.toLowerCase()) { | |
| callbackFn.call(evt.srcElement, evt); | |
| } | |
| }); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function callbackFn(event) { | |
| alert(this) // we expect it to be clicked link element | |
| event.target // <a> in both cases | |
| event.currentTarget // this is where difference sits | |
| } | |
| // add listener for callbackFn to all link elements | |
| Y.on('click', callbackFn, 'a') | |
| // add listener to #myCont element and | |
| // delegate callbackFn to all link elements inside | |
| Y.delegate('click', callbackFn, '#myCont', 'a') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function callbackFnForClick(evt) { | |
| // this is of course veeery naive and any framework method designed | |
| // for delegation will just use your callback on correct object | |
| // and in correct context in much smarter way | |
| if(evt.target.nodeName.toLowerCase() === 'a') { | |
| // do some interactions | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a> gets clicked | |
| Bubbling: <a> → <p> → <div> → <body> | |
| Capturing: <body> → <div> → <p> → <a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var container = document.getElementById('myCont'); | |
| var links = container.getElementsByTagName('a') | |
| // gazillion of links on the page | |
| for(var i = 0, length = links.length; i < length; i++) { | |
| links[i].addEventListener('click', clickCallbackFn, false); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function callbacFnForClick(evt) { | |
| alert(evt.target) // the element that the event is fired on | |
| alert(evt.currentTarget) // the element that the event was bound to | |
| } | |
| var myCont = document.getElementById('myCont'); | |
| myCont.addEventListener('click', callbackFnForClick, false) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div id="myCont"> | |
| <p><a id="myLink" href="some.html">Some link</a></p> | |
| <div> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div id="myCont"> | |
| <p><a id="myLink1" href="some.html">Some link 1</a></p> | |
| <p><a id="myLink2" href="some.html">Some link 2</a></p> | |
| <p><a id="myLink3" href="some.html">Some link 3</a></p> | |
| <p><a id="myLink4" href="some.html">Some link 4</a></p> | |
| <p>...</p> | |
| <p><a id="myLink57" href="some.html">Some link 57</a></p> | |
| <div> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment