js的事件绑定

js如何绑定事件?

1. html绑定事件

     <button class="btn" onclick="alert(1111)">事件绑定</button>

直接写到标签内部,但是不利于后期的维护,现在几乎不用

2. dom0级绑定事件

 2.dom0级绑定事件
   //先获取dom
   var btn=document.querySelector('.btn');
    //再给dom绑定事件
    btn.onclick=function(e) {
      console.log(e.target)
    }
    
   // dom0移除： dom元素.οnclick=null
    
    // 优点：兼容性好
    // 缺点：不支持同一事件的多次绑定，只支持事件冒泡

3. 3.dom2级绑定事件

【主流绑定事件的方式，特别是适合原生移动端的JS】

 //先获取dom
    var btn=document.querySelector('.btn');
    //再给dom绑定dom2级事件
    //dom元素.addEventListener('事件名',事件监听函数,是否冒泡或捕获)
    btn.addEventListener('click',func,false)

    function func() {
        console.log(1111)
    }
    
     // 移除事件： btn.removeEventListener('事件类型',要移除的事件名,false)


     // 优点：支持同一事件的多次绑定,除了事件冒泡外，还支持事件捕获
     // 缺点：兼容性一般，不过在移动端无压力
     
     // 检测js,css兼容浏览器的网站：https://caniuse.com/