How to convert selectors and event capturing from jQuery to plain JS?

Question

Can someone please help with converting this code to plain JS:

$(document).ready(function() {
    $("textarea").bind("keydown", function(event) {
        var textarea = $(this).get(0);          
        //further will need only textarea and event vars
    }
});

I don't care about cross browser compatibility as long as it works in current FF and Chrome.

Answer 1

Why convert it to "plain JS"? jQuery essentially is plain JS. It's just a language built around Javascript. What is it that's not working for you with jQuery

Answer 2

Your selector is quite simple, you are looking for all the textarea elements, then you can use the document.getElementsByTagName method.

To simulate $(document).ready, we can bind the DOMContentLoaded event e.g.:

document.addEventListener('DOMContentLoaded', function () {
  var allTextAreas = document.getElementsByTagName('textarea');
  // event handler
  var handler = function (event) {
    var textarea = this;
    //...
  };

  // iterate over the textareas and bind the event
  for(var i = 0, len = allTextAreas.length; i < len; i++) {
    allTextAreas[i].addEventListener('keydown', handler, false);
  } 
}, false);

For CSS selectors, you can use the querySelectorAll method, available on both browsers you are targeting.

See also:

• Selectors API
• Thoughts on querySelectorAll