如何用js原生写 jq的属性选择器

Question

今天遇到一个项目，需要使用原生js编写前端DOM操作

平时监听class的click事件或者blur事件都是用jq的方法：
`

$('.classname').click(function);
$('.classname').blur(function);

`

通过js原生应该如何实现呢？

项目中有非常多的同样的classname需要监听点击
所以在万不得已的情况下不能通过标签属性onclick="function()" 这样的方式监听，太难维护了。

请问各位是如何用原生js监听事件的？

Answer 1

document.querySelector

和

document.querySelectorAll

Answer 2

var tags = document.getElementsByClassName('classname')
for(var i in tags) {
    tags[i].addEventListener('click', function() {
        // ...
    })
}

Answer 3

function $(el){
    return document.querySelectorAll(el);
}
NodeList.prototype.on = function(evt,fun){
  if(this && this.length > 0){
    this.forEach((item)=>{
        item[evt] = fun;
    })
  }  
}

$('div,h2,h1').on("onclick",function(){
    console.log(this)
})