Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Back To Basics JavaScript Events And Responding To The User

Whenever people ask me about the most powerful things in JavaScript and the DOM, I quickly arrive at events. The reason is that events in browsers are incredibly useful. Furthermore, decoupling functionality from events is a powerful idea, which is why Node.js1 became such a hot topic.

Today, let’s get back to the basics of events and get you in the mood to start playing with them, beyond applying click handlers to everything or breaking the Web with <a href="javascript:void(0)"> links or messing up our HTML with onclick="foo()" inline handlers (I explained in detail in 2005 why these are bad ideas2).

Note: This article uses plain JavaScript and not any libraries. A lot of what we’ll talk about here is easier to achieve in jQuery, YUI or Dojo, but understanding the basics is important because you will find yourself in situations where you cannot use a library but should still be able to deliver an amazing solution.

Disclaimer: The event syntax we’ll be using here is addEventListener()3, as defined in the “DOM Level 3 Events4” specification, which works in all browsers in use now except for Internet Explorer below version 9. A lot of the things we’ll show can be achieved with jQuery, though, which also supports legacy browsers. Come to think of it, one simple addEventListener() on DOMContentLoaded is a great way to make sure your script does not run on legacy browsers. This is a good thing. If we want the Web to evolve, we need to stop giving complex and demanding code to old browsers. If you build your solutions the right way, then IE 6 would not need any JavaScript to display a workable, albeit simpler, solution. Think of your product as an escalator: if your JavaScript does not execute, the website should still be usable as stairs.

Before we get into the details of events and how to use them, check out a few demos that use scroll events in a clever way to achieve pretty sweet results:

All of this is based on event handling and reading out what the browser gives us. Now, let’s look at repeating the basics of that.

Basics: What Is An Event? Link

var log = document.getElementById('log'),
    i = '', 
    out = [];
for (i in window) {
  if ( /^on/.test(i)) { out[out.length] = i; }
}
log.innerHTML = out.join(', ');

In my case, running Firefox, I get this:

onmouseenter, onmouseleave, onafterprint, onbeforeprint, onbeforeunload, onhashchange, onmessage, onoffline, ononline, onpopstate, onpagehide, onpageshow, onresize, onunload, ondevicemotion, ondeviceorientation, onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmozfullscreenchange, onmozfullscreenerror, onpause, onplay, onplaying, onprogress, onratechange, onreset, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting, oncopy, oncut, onpaste, onbeforescriptexecute, onafterscriptexecute

That is a lot to play with, and the way to do that is by using addEventListener():

element.addEventListener(event, handler, useCapture);

For example:

var a = document.querySelector('a'); // grab the first link in the document
a.addEventListener('click', ajaxloader, false);

The element is the element that we apply the handler to; as in, “Hey you, link! Make sure you tell me when something happens to you.” The ajaxloader() function is the event listener; as in, “Hey you! Just stand there and keep your ears and eyes peeled in case something happens to the link.” Setting the useCapture to false means that we are content to capture the event on bubbling, rather than the capturing phase. This is a long and arduous topic10, well explained on Dev.Opera. Let’s just say that by setting the useCapture to false, you will be fine in 99.7434% of cases (a rough approximation). The parameter is actually optional in all browsers but Opera.

Now, the event handler function gets an object as a parameter from the event, which is full of awesome properties that we can play with. If you try out my example11, you’ll see what the following code does:

var log = document.getElementById('log'),
    out = '';
    
document.addEventListener('click', logeventinfo, false);
document.addEventListener('keypress', logeventinfo, false);

function logeventinfo (ev) {
  log.innerHTML = '';
  out = '<ul>';
  for (var i in ev) {
    if (typeof ev[i] === 'function' || i === i.toUpperCase()) {
      continue;
    }
    out += '<li><span>'+i+'</span>: '+ev[i]+'</li>';
  }
  log.innerHTML += out + '</ul>';
}

You can assign several event handlers to the same event, or the same handler to various events (as shown in this demo).

The ev is what we get back from the event. And (again, in my case, in Firefox) a lot of interesting things are in it:

originalTarget: [object HTMLHtmlElement]
type: click
target: [object HTMLHtmlElement]
currentTarget: [object HTMLDocument]
eventPhase: 3
bubbles: true
cancelable: true
timeStamp: 574553210
defaultPrevented: false
which: 1
rangeParent: [object Text]
rangeOffset: 23
pageX: 182
pageY: 111
isChar: false
screenX: 1016
screenY: 572
clientX: 182
clientY: 111
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
relatedTarget: null
mozPressure: 0
mozInputSource: 1
view: [object Window]
detail: 1
layerX: 182
layerY: 111
cancelBubble: false
explicitOriginalTarget: [object HTMLHtmlElement]
isTrusted: true
originalTarget: [object HTMLHeadingElement]
type: click
target: [object HTMLHeadingElement]
currentTarget: [object HTMLDocument]
eventPhase: 3
bubbles: true
cancelable: true
timeStamp: 574554192
defaultPrevented: false
which: 1
rangeParent: [object Text]
rangeOffset: 0
pageX: 1
pageY: 18
isChar: false
screenX: 835
screenY: 479
clientX: 1
clientY: 18
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
relatedTarget: null
mozPressure: 0
mozInputSource: 1
view: [object Window]
detail: 1
layerX: 1
layerY: 18
cancelBubble: false
explicitOriginalTarget: [object Text]
isTrusted: true

It also differs from event to event. Try clicking the demo and pressing keys, and you will see that you get different results. You can also refer to the full list of standard event properties12.

The Last Of The Basics: Preventing Execution And Getting The Target Link

Two more things are important when it comes to events in the browser: we have to stop the browser from carrying out its default action for the event, and we have to find out which element the event fired on. The former is achieved with the ev.preventDefault() method, and the latter is stored in ev.target.

Say you want to know that a link has been clicked, but you don’t want the browser to follow it because you have a great idea of what to do with that event instead. You can do this by subscribing to the click event of the link, and you can stop the browser from following it by calling preventDefault(). Here is the HTML:

<a class="prevent" href="http://smashingmagazine.com">Smashing, my dear!</a>
<a class="normal" href="http://smashingmagazine.com">Smashing, my dear!</a>

And the JavaScript:

var normal = document.querySelector('.normal'),
    prevent = document.querySelector('.prevent');

prevent.addEventListener('click', function(ev) {
  alert('fabulous, really!');
  ev.preventDefault();
}, false);

normal.addEventListener('click', function(ev) {
  alert('fabulous, really!');
}, false);

Note: document.querySelector() is the standard way to get an element in the DOM. It is what the $() method in jQuery does. You can read the W3C’s specification13 for it and get some explanatory code snippets14 on the Mozilla Developer Network (MDN).

If you now click the link, you will get an alert. And when you hit the “OK” button, nothing more happens; the browser does not go to http://smashingmagazine.com. Without the preventDefault(), the browser will show the alert and follow the link. Try it out.15

The normal way to access the element that was clicked or hovered over or that had a key pressed is to use the this keyword in the handler. This is short and sweet, but it’s actually limiting because addEventListener() gives us something better: the event target. It could also be confusing because this might already be bound to something else, so using ev.currentTarget as noted in the specification is a safer bet.

Event Delegation: It Rocks. Use It! Link

Using the target property of the event object, you can find out which element the event occurred on.

Events happen by going down the whole document tree to the element that you interacted with and back up to the main window. This means that if you add an event handler to an element, you will get all of the child elements for free. All you need to do is test the event target and respond accordingly. See my example of a list16:

<ul id="resources">
  <li><a href="http://developer.mozilla.org">MDN</a></li>
  <li><a href="http://html5doctor.com">HTML5 Doctor</a></li>
  <li><a href="http://html5rocks.com">HTML5 Rocks</a></li>
  <li><a href="http://beta.theexpressiveweb.com/">Expressive Web</a></li>
  <li><a href="http://creativeJS.com/">CreativeJS</a></li>
</ul>

Hover your mouse over the list in this example and you will see that one event handler is enough to get the links, the list item and the list itself. All you need to do is compare the tagName of the event target to what you want to have.

var resources = document.querySelector('#resources'),
    log = document.querySelector('#log');

resources.addEventListener('mouseover', showtarget, false);

function showtarget(ev) {
  var target = ev.target;
  if (target.tagName === 'A') {
    log.innerHTML = 'A link, with the href:' + target.href;
  }
  if (target.tagName === 'LI') {
    log.innerHTML = 'A list item';
  }
  if (target.tagName === 'UL') {
    log.innerHTML = 'The list itself';
  }
}

This means you can save a lot of event handlers — each of which is expensive to the browser. Instead of applying an event handler to each link and responding that way — as most people would do in jQuery with $('a').click(...) (although jQuery’s on is OK) — you can assign a single event handler to the list itself and check which element was just clicked.

The main benefit of this is that you are independent of the HTML. If you add more links at a later stage, there is no need to assign new handlers; the event handler will know automatically that there is a new link to do things with.

Events For Detection, CSS Transitions For Smoothness Link

If you remember the list of properties earlier in this article, there is a lot of things we can use. In the past, we used events for simple hover effects, which now have been replaced with effects using the :hover and :focus CSS selectors. Some things, however, cannot be done with CSS yet; for example, finding the mouse’s position. With an event listener, this is pretty simple. First, we define an element to position, like a ball. The HTML:

<div class="plot"></div>

And the CSS:

.plot {
  position:absolute;
  background:rgb(175,50,50);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: block;
  top:0;
  left:0;
}

We then assign a click handler to the document and position the ball at PageX17 and pageY. Notice that we need to subtract half the width of the ball in order to center it on the mouse pointer:

var plot = document.querySelector('.plot'),
    offset = plot.offsetWidth / 2;
document.addEventListener('click', function(ev) {
  plot.style.left = (ev.pageX - offset) + 'px';
  plot.style.top = (ev.pageY - offset) + 'px';
}, false);

Clicking anywhere on the screen will now move the ball there. However, it’s not smooth. If you enable the checkbox in the demo18, you will see that the ball moves smoothly. We could animate this with a library, but browsers can do better these days. All we need to do is add a transition to the CSS, and then the browser will move the ball smoothly from one position to another. To achieve this, we define a new class named smooth and apply it to the plot when the checkbox in the document is clicked. The CSS:

.smooth {
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

The JavaScript:

var cb = document.querySelector('input[type=checkbox]');
cb.addEventListener('click', function(ev) {
  plot.classList.toggle('smooth');
}, false);

The interplay between CSS and JavaScript events has always been powerful, but it got even better in newer browsers. As you might have guessed, CSS transitions and animations have their own events.

How Long Was A Key Pressed? Link

As you might have seen in the list of available events earlier, browsers also give us a chance to respond to keyboard entry and tell us when the user has pressed a key. Sadly, though, key handling in a browser is hard to do properly, as Jan Wolter explains in detail19. However, as a simple example, let’s look how we can measure in milliseconds how long a user has pressed a button. See this keytime demo20 for an example. Press a key, and you will see the output field grow while the key is down. Once you release the key, you’ll see the number of milliseconds that you pressed it. The code is not hard at all:

var resources = document.querySelector('#resources'),
    log = document.querySelector('#log'),
    time = 0;

document.addEventListener('keydown', keydown, false);
document.addEventListener('keyup', keyup, false);

function keydown(ev) {
  if (time === 0) { 
    time = ev.timeStamp; 
    log.classList.add('animate');
  }
}
function keyup(ev) {
  if (time !== 0) {
    log.innerHTML = ev.timeStamp - time;
    time = 0;
    log.classList.remove('animate');
  }
}

We define the elements we want and set the time to 0. We then apply two event handlers to the document, one on keydown and one on keyup.

In the keydown handler, we check whether time is 0, and if it is, we set time to the timeStamp of the event. We assign a CSS class to the output element, which starts a CSS animation (see the CSS for how that is done).

The keyup handler checks whether time is still 0 (as keydown gets fired continuously while the key is pressed), and it calculates the difference in the time stamps if it isn’t. We set time back to 0 and remove the class to stop the animation.

Working With CSS Transitions (And Animations) Link

CSS transitions21 fire a single event that you can listen for in JavaScript called transitionend. The event object then has two properties: propertyName, which contains the property that was transitioned, and elapsedTime, which tells you how long it took.

Check out the demo22 to see it in action. The code is simple enough. Here is the CSS:

.plot {
  background:rgb(175,50,50);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: block;
  -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
      -ms-transition: 0.5s;
       -o-transition: 0.5s;
          transition: 0.5s;
}

.plot:hover {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  background: blue;
}

And the JavaScript:

plot.addEventListener('transitionend', function(ev) {
  log.innerHTML += ev.propertyName + ':' + ev.elapsedTime + 's ';
}, false);

This, however, works only in Firefox right now because Chrome, Safari and Opera have vendor-prefixed events instead. As David Calhoun’s gist23 shows, you need to detect what the browser supports and define the event’s name that way.

CSS animation events24 work the same way, but you have three events instead of one: animationstart, animationend and animationiteration. MDN has a demo25 of it.

Speed, Distance And Angle Link

Detecting events happening is one thing. If you want to do something with them that is a beautiful and engaging, then you need to go further and put some math into it. So, let’s have a go at using a few mouse handlers to calculate the angle, distance and speed of movement when a user drags an element across the screen. Check out the demo first.26

var plot = document.querySelector('.plot'),
    log = document.querySelector('output'),
    offset = plot.offsetWidth / 2,
    pressed = false,
    start = 0, x = 0, y = 0, end = 0, ex = 0, ey = 0, mx = 0, my = 0, 
    duration = 0, dist = 0, angle = 0;

document.addEventListener('mousedown', onmousedown, false);
document.addEventListener('mouseup', onmouseup, false);
document.addEventListener('mousemove', onmousemove, false);

function onmousedown(ev) {
  if (start === 0 && x === 0 && y === 0) {
    start = ev.timeStamp;
    x = ev.clientX;
    y = ev.clientY;
    moveplot(x, y);
    pressed = true;
  }
}
function onmouseup(ev) {
  end = ev.timeStamp;
  duration = end - start;
  ex = ev.clientX;
  ey = ev.clientY;
  mx = ex - x;
  my = ey - y;
  dist = Math.sqrt(mx * mx + my * my);
  start = x = y = 0;
  pressed = false;
  angle = Math.atan2( my, mx ) * 180 / Math.PI;
  log.innerHTML = '<strong>' + (dist>>0) +'</strong> pixels in <strong>'+
                  duration +'</strong> ms ( <strong>' +
                  twofloat(dist/duration) +'</strong> pixels/ms)'+
                  ' at <strong>' + twofloat(angle) +
                  '</strong> degrees';
}
function onmousemove (ev) {
  if (pressed) {
    moveplot(ev.pageX, ev.pageY);
  }
}
function twofloat(val) {
  return Math.round((val*100))/100;
}
function moveplot(x, y) {
  plot.style.left = (x - offset) + 'px';
  plot.style.top = (y - offset) + 'px';
}

OK, I admit: quite a lot is going on here. But it is not as hard as it looks. For both onmousedown and onmouseup, we read the mouse’s position with clientX and clientY and the timeStamp of the event. Mouse events have time stamps that tell you when they happened. When the mouse moves, all we check is whether the mouse button has been pressed (via a boolean set in the mousedown handler) and move the plot with the mouse.

The rest is geometry — good old Pythagoras27, to be precise. We get the speed of the movement by checking the number of pixels traveled in the time difference between mousedown and mouseup.

We get the number of pixels traveled as the square root of the sum of the squares of the difference between x and y at the start and end of the movement. And we get the angle by calculating the arctangent of the triangle. All of this is covered in “A Quick Look Into the Math of Animations With JavaScript28”; or you can play with the following JSFiddle example:

Media Events Link

Both video and audio fire a lot of events that we can tap into. The most interesting are the time events that tell you how long a song or movie has been playing. A nice little demo to look at is the MGM-inspired dinosaur animation29 on MDN; I recorded a six-minute screencast30 explaining how it is done.

If you want to see a demo of all the events in action, the JPlayer team has a great demo page showing media events31.

Input Options Link

Traditionally, browsers gave us mouse and keyboard interaction. Nowadays, this is not enough because we use hardware that offers more to us. Device orientation32, for example, allows you to respond to the tilting of a phone or tablet; touch events33 are a big thing on mobiles and tablets; the Gamepad API34 allows us to read out game controllers in browsers; postMessage35 allows us to send messages across domains and browser windows; pageVisibility36 allows us to react to users switching to another tab. We can even detect when the history object of the window has been manipulated37. Check the list of events in the window object to find some more gems that might not be quite ready but should be available soon for us to dig into.

Whatever comes next in browser support, you can be sure that events will be fired and that you will be able to listen to them. The method works and actually rocks.

Go Out And Play Link

And that is it. Events are not hard; in most cases, you just need to subscribe to them and check what comes back as the event object to see what you can do with it. Of course, a lot of browser hacking is still needed at times, but I for one find incredible the number of ways we can interact with our users and see what they are doing. If you want to get really creative with this, stop thinking about the use cases we have now and get down into the nitty gritty of what distances, angles, speed and input can mean to an interface. If you think about it, playing Angry Birds to the largest degree means detecting the start and end of a touch event and detecting the power and direction that the bird should take off in. So, what is stopping you from creating something very interactive and cool?

Image source38 of picture on front page.

(al)

Footnotes Link

  1. 1 http://nodejs.org/
  2. 2 http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
  3. 3 https://developer.mozilla.org/en/DOM/element.addEventListener
  4. 4 http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener
  5. 5 https://www.wealthfront.com/designerwanted
  6. 6 http://2011.beercamp.com/
  7. 7 http://eng.wealthfront.com/2012/03/scrolling-z-axis-with-css-3d-transforms.html
  8. 8 http://lab.hakim.se/scroll-effects/
  9. 9 http://joelb.me/scrollpath/
  10. 10 http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
  11. 11 http://thewebrocks.com/demos/smashing-events/eventproperties.html
  12. 12 https://developer.mozilla.org/en/DOM/event#Properties
  13. 13 http://www.w3.org/TR/selectors-api/
  14. 14 https://developer.mozilla.org/En/Code_snippets/QuerySelector
  15. 15 http://thewebrocks.com/demos/smashing-events/preventdefault.html
  16. 16 http://thewebrocks.com/demos/smashing-events/eventdelegation.html
  17. 17 https://developer.mozilla.org/en/DOM/event.pageX
  18. 18 http://thewebrocks.com/demos/smashing-events/mouseposition.html
  19. 19 http://unixpapa.com/js/key.html
  20. 20 http://thewebrocks.com/demos/smashing-events/keytime.html
  21. 21 https://developer.mozilla.org/en/CSS/CSS_transitions
  22. 22 http://thewebrocks.com/demos/smashing-events/transitionevent.html
  23. 23 https://gist.github.com/702826
  24. 24 https://developer.mozilla.org/en/CSS/CSS_animations
  25. 25 https://developer.mozilla.org/samples/cssref/animations/animevents.html
  26. 26 http://thewebrocks.com/demos/smashing-events/speeddistanceangle.html
  27. 27 http://en.wikipedia.org/wiki/Pythagorean_theorem
  28. 28 https://www.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/
  29. 29 http://hacks.mozilla.org/2012/03/making-the-dino-roar-syncing-audio-and-css-transitions/
  30. 30 http://www.youtube.com/watch?v=aFIJ_ZpV-8Q
  31. 31 http://www.jplayer.org/HTML5.Media.Event.Inspector/
  32. 32 https://developer.mozilla.org/en/DOM/DeviceOrientationEvent
  33. 33 https://developer.mozilla.org/en/DOM/Touch_events
  34. 34 http://hacks.mozilla.org/2011/12/paving-the-way-for-open-games-on-the-web-with-the-gamepad-and-mouse-lock-apis/
  35. 35 https://developer.mozilla.org/en/DOM/window.postMessage
  36. 36 https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API
  37. 37 https://developer.mozilla.org/en/DOM/window.onpopstate
  38. 38 http://www.flickr.com/photos/opensourceway/6554315319/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Chris is a Developer Evangelist living in London, England, who writes about Javascript development, accessibility, and all things open web. After several years evangelizing at Mozilla Foundation, he's now working at Microsoft's EdgeDev team.

  1. 1

    Chris Heilmann

    August 17, 2012 7:15 am

    the .on handler uses event delegation under the hood. click() doesn’t

    10
  2. 2

    Except if you want to build yourself up as a javascript developer, jQuery isn’t going to get you there.

    8
  3. 3

    Good one Chris. Especially the part of tracking the distance and speed and the angle. A lof of useful basic code in there.

    Cheers!

    2
  4. 4

    André Malkine

    August 17, 2012 8:24 am

    This is an incredibly helpful breakdown. Great examples too!

    A word of caution – make sure you apply ‘xxx-user-select: none;’ to anything you’re going to be “dragging around” via an ‘onmousedown’ routine (like your “Speed, Distance And Angle” demo). Otherwise, your browser tends to “lift” a blank text clipping off of the page, abandoning the interactive process you so carefully scripted.

    6
  5. 5

    use jQuery! So much easier!!! ;)

    -36
  6. 6

    use jQuery! So much easier!!!

    BINGO?

    -25
  7. 7

    Tiffany Brown

    August 17, 2012 6:43 am

    “Let’s just say that by setting the useCapture to false, you will be fine in 99.7434% of cases (a rough approximation). The parameter is actually optional in all browsers but Opera.”

    The useCapture parameter is optional in Opera as well. It was added in 11.60 if I recall correctly. (The latest stable version is 12.00).

    7
  8. 8

    Sérgio Lopes

    August 17, 2012 6:48 am

    Nice article, Chris!

    You said something about jQuery: “as most people would do in jQuery with $(‘a’).click(…) (although jQuery’s on is OK) “. Can you elaborate on that? What does jQuery’s on() do that differs from traditional addEventListener and that make it OK?

    0
  9. 9

    In your first code block, the i variable is declared twice – first in the var statement, and then in the for-header. Also, in the var statement, you’re assigning the value null to i. This is superfluous. The i variable is used to contain property names (strings), so initializing it with null serves no purpose.

    Also, in a subsequent code block of the same chapter, you’re defining an i variable and assigning 0 to it. That variable is not used anywhere in the code. The “logeventinfo” function declares its own local variable i.

    4
  10. 10

    Nice introduction to events and event handling, Chris. Can you elaborate on what you meant by:

    “Furthermore, decoupling functionality from events is a powerful idea, which is why Node.js became such a hot topic.”

    I was looking for further discussion on this topic as I read the article, but didn’t find any. Did I miss it?

    0
  11. 11

    This could make sense several years ago, but I really don’t see why you would want to use any lib for abstracting event listeners in 2012. Most techniques described in this article will work on all major browsers. It could be more convenient to have some wrappers for handling CSS transition/animation events, but AFAIK jQuery does not support those at all.

    3
  12. 12

    Chris Heilmann

    August 17, 2012 4:08 pm

    Very good points! thanks!

    0
  13. 13

    Chris Heilmann

    August 17, 2012 4:11 pm

    Good catch, some copy and paste mistakes there.

    0
  14. 14

    Couldnt be further from the truth.

    Companies couldnt care less how you get from point A to point B.

    Companies only want the end result, they wouldnt understand whether you used jQuery or pure JS either way.

    0
  15. 15

    That’s not true. All events, including shortcuts like “click”, are handled by .on since version 1.7.1. https://github.com/jquery/jquery/blob/master/src/event.js#L1021-1044

    8
  16. 16

    Rahul Choubey

    August 17, 2012 11:13 pm

    They call IE9 a modern browser but most of transitional demos not working there :)

    4
  17. 17

    Technically correct, in a corporate narrow-minded kind of way. You can get hired without knowing pure JS.

    But you’ll never be able to solve REAL problems, if all you know is a very small subset of JS, because you only know one framework. Learning to do things in a pure language allows you to learn how things work at a much lower level than you get in a framework, which can save you time, frustration, and heartache in the long run. It can also help you be more efficient, and it gives you a much bigger skillset, which means bigger pay, more job opps, and an easier time learning other frameworks.

    18
  18. 18

    Chris Heilmann

    August 18, 2012 3:30 am

    Splendid. However, not everybody upgrades their jQuery installs – actually a lot of people don’t. So the danger of using click() still stands in older code.

    1
  19. 19

    Chris Heilmann

    August 18, 2012 3:31 am

    No you didn’t. Deep-diving into Node would have been out of scope for this article. Let’s just say it follows the same principles.

    2
  20. 20

    Michiel van Eerd

    August 18, 2012 3:51 am

    Hey Chris, nice article (never knew there was a timeStamp property…). But maybe you should mention that jQuery .on only uses event delegation if you set a selector as the second argument.

    3

↑ Back to top