1 直接在html標簽中綁定
<button onclick = "show()"></button>
注意當你引用的js代碼是包裹在window.onload中的形式的時候，show()是會報沒有定義的錯誤，原因在於window.onload是在
頁面全部加載完之后再去解析加載里面的內容。而button的點擊事件在解析button的時候沒有被定義。
2 用js的對象進行綁定事件
<body><buttonid="btn1">點擊1</button></body><script>window.onload =function(){console.log("onload事件執行...");var oBtn = document.getElementById('btn1');oBtn.onclick =function(){console.log('btn1的點擊事件被觸發...');}}</script>
3 用事件監聽的方式
<script>window.onload =function(){console.log('onload執行...');var oBtn = document.getElementById('btn1');oBtn.addEventListener('click',function(){console.log('btn1的點擊監聽事件被觸發');})}</script>
4 事件監聽的捕獲和冒泡方式
addEventListener(‘觸發事件’,’執行函數’,boolean)，boolean默認為false
添加事件監聽的第三個參數，flase:冒泡 ，true：捕獲；兩者區別在於，冒泡觸發是從內向外的，捕獲事件是從外向內的，點擊事件的順序是從外到內，在從內到外,給事件設置不同的事件監聽方式使他在不同的階段執行
<div id ='div1'><div id="div2"><button id ='btn1'>點擊1</button><button id ='btn2'>點擊2</button></div></div><script>window.onload =function(){console.log('onload執行...');document.getElementById('btn1').addEventListener('click',function(){console.log('btn1的點擊監聽事件被觸發');},false);document.getElementById('btn2').addEventListener('click',function(){console.log('btn2的點擊監聽事件被觸發');},true);document.getElementById('div1').addEventListener('click',function(){console.log('div1的點擊監聽事件被觸發');},false);document.getElementById('div2').addEventListener('click',function(){console.log('div2的點擊監聽事件被觸發');},true);}</script>
5 阻止事件冒泡
通過e.stopPropagation();阻止冒泡
document.getElementById('btn1').addEventListener('click',function(e){e.stopPropagation();console.log('btn1的點擊監聽事件被觸發');},false);