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);