JS原生绑定事件

JS原生绑定事件主要分为三种：

1. html事件处理程序
2. DOM0事件处理程序
3. DOM2事件处理程序

html事件绑定

就是在HTML标签上直接添加事件，类似于css的行内样式

• 缺点：不好维护，因为散落在标签中，耦合度太高

//<button onclick='事件处理函数'>点击</button>
<button onclick='function(){
    console.log('触发按钮点击事件');
}'>点击</button>

DOM0事件绑定

先获取dom元素，然后给dom元素添加事件

• 优点：兼容性好
• 缺点：只支持冒泡，不支持捕获

//添加事件
var btn = document.getElementById('id元素');
btn.onclick = function(){
    console.log('触发点击事件');
}
//移除事件
btn.onclick = null;

DOM2事件绑定

提供类专门的绑定（addEventListener）和移除（removeEventListener）的方法

• 优点：支持给元素绑定多个相同事件，支持冒泡和捕获

//添加事件
var btn = document.getElementById('id元素');
btn.addEventListener('click',function(){
    console.log('触发点击事件')
},false);
//移除事件
btn.removeEventListener('click',要移除的事件处理函数名称,false);