Wie konvertiert man Selektoren und Event-Capturing von jQuery in einfaches JS?

Question

Kann jemand bitte mit der Umwandlung dieses Codes in einfache JS helfen:

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

Die Kompatibilität mit anderen Browsern ist mir egal, solange sie in den aktuellen Browsern FF und Chrome funktioniert.

Answer 1

Ihr Selektor ist recht einfach, Sie suchen nach allen textarea Elemente, dann können Sie die document.getElementsByTagName méthode.

Zu simulieren $(document).ready können wir die DOMContentLoaded Veranstaltung z.B.:

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);

Für CSS-Selektoren können Sie die querySelectorAll Methode, die in beiden Browsern, auf die Sie abzielen, verfügbar ist.

Siehe auch:

• Selektoren-API
• Überlegungen zu querySelectorAll

Answer 2

Warum sollte man es in "einfaches JS" umwandeln? jQuery ist im Grunde einfaches JS. Es ist nur eine Sprache, die um Javascript herum aufgebaut ist. Was funktioniert bei Ihnen mit jQuery nicht?