如何将选择器和事件捕获从jQuery转换为纯JS？

Question

有人可以帮助将此代码转换为纯JS:

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

我不关心跨浏览器兼容性,只要它适用于当前的FF和Chrome.

Answer 1

您的选择器非常简单,您正在寻找所有textarea元素,然后您可以使用该document.getElementsByTagName方法.

为了模拟$(document).ready,我们可以绑定DOMContentLoaded事件,例如:

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

对于CSS选择器,您可以使用querySelectorAll您要定位的两种浏览器上提供的方法.

也可以看看:

• 选择器API
• 关于querySelectorAll的想法