原生Js事件綁定的三種方式

• html標籤事件綁定：屬性賦值 ，這個在該元素的properties屬性中能夠查到， 也能夠在事件監聽中看到

function show(){
　　console.log('show');
}

function print(){
　　console.log('print');
}

<button onclick="show()" id="btn1" onclick="print()">html標籤事件綁定</button>
//觸發的方法只有show方法

<button onclick="show();print()" id="btn1">html標籤事件綁定</button>
//一個事件，觸發兩個方法

• js事件綁定：屬性賦值，這個在該元素的properties屬性中能夠查到，也能夠在事件監聽中看到

<button id="btn2">js事件綁定</button>

 document.getElementById("btn2").onclick = show;
 document.getElementById("btn2").onclick = print;

//只能觸發print方法，若是須要同時觸發兩個方法，只能使用事件監聽

• 事件監聽：只能夠在該元素的事件監聽中看到

<button id="btn3">事件監聽</button>      

//show和print兩個方法均可以觸發
document.getElementById("btn3").addEventListener("click",show);
document.getElementById("btn3").addEventListener("click",print);

//移除事件監聽
document.getElementById("btn3").removeEventListener("click");