DOM0级事件和DOM2级事件

DOM0级事件

分为两种，一种是在标签内添加执行语句:

<button id = "button1" onclick="console.log('123')">点击</button>

一种是定义执行函数

<button id="button1">点击</button>

<script>
var btn = document.getElementById("button1");
btn.onclick = function(){
    console.log("456");
}
</script>

在DOM0级事件中，如果给元素的某一个行为绑定多个执行事件，那么最后绑定的事件将会替换掉所有事件

<button id="button1">点击</button>

<script>
var btn = document.getElementById("button1");
btn.onclick = function(){
    console.log("456");
}
btn.onclick = function(){
    console.log("789");
}
</script>

DOM2级事件

方法：addEventListener/removeEventListener实现DOM二级事件绑定和移出

第一个参数：事件名称
第二个参数：执行函数
第三个参数：指定冒泡还是捕获，默认是false，冒泡。

在DOM二级事件中，如果给元素的某一个行为绑定多个执行事件，将都会触发

<button id="button2">点击</button>
<script>
var BTN2 = document.getElementById("button2");
BTN2.addEventListener("click",function(){
    console.log("789");
},false)
BTN2.addEventListener("click",function(){
     console.log("111");
},false)
</script>