Event Delegation without jQuery
Before I Digress…
I could easily derail myself here by getting up onto my soapbox and going on and on about efficiency, performance and other stuff. I’m going to try to save that for another post so I can get right down to business in this one. Before we go any further, here’s the completed fiddle. It’s commented pretty well, so I’m just going to go over the bit about delegation.
Our final product is going to be an input and a list. The input has a green button that adds the input’s contents to the list. Each item on the list is going to have its own button for removing itself. So it’s almost like a to-do list, but very basic.
First we cache our target elements to variables. We’re declaring the main
ul tag, the main
button that adds items, and the
input that we’ll use to type in our new stuff. Once that’s done, we’ll need event listeners on the button and the list.
From here, we just write the event handler functions and we’re done. The main button handler is pretty clear in the fiddle, so I’d like to focus on the list handler. That’s the one we’re delegating. Have a look at this:
What’s an event.target?
It’s just a few lines because I’m utilizing the
event object. Seriously, try adding
console.log(event) to some kind of handler and just drill down through that thing in the console. Or you can just do it in the fiddle, because I left a log statement in there.
There’s a bit of duplication in there, so you can get the identity of whatever was clicked from
srcElement because they’re the same thing. You can get the identity of the thing that was actually clicked from either
parentNode, which are also the same thing.
In Bootstrap, this type of
button has a
span in it (which contains the glyphicon) and that can make things a bit weird with regard to who/what was clicked. To solve it, I went into the CSS and set the span’s to
pointer-event:none. This means that the span is never clicked, so the event will just bubble up from the button. The button is the event target, and the
parentElement is the
list element that the button lives in.
So our target node is always matched up to the button inside it. When we tell
stuffList to remove
targetNode, we’re telling the unordered list to get rid of the correct list element. The initial
if statement makes sure that we don’t try any of this when the list element is clicked. We only want to respond to the button.
But what if we did use jQuery?
Well, our code would have looked like this:
It would have amounted to fewer lines, but we never would have learned anything about the event object. We would also be pulling in a rather large library just for a dinky little list adder-subtracter thingy. The lines we save in our little function would be gained back a hundredfold just by adding jQuery’s codebase to the mix.
Sometimes you really need jQuery, and once you’ve added it to a project then you should certainly take advantage of all it has to offer. But sometimes you’re going to make little things, and you’ll need to decide whether jQuery’s many fine qualities are worth the weight.