<button onclick = "show()"></button>
页面全部加载完之后再去解析加载里面的内容。而button的点击事件在解析button的时候没有被定义。
<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><script> window.onload =function(){ console.log(‘onload执行...‘);var oBtn = document.getElementById(‘btn1‘); oBtn.addEventListener(‘click‘,function(){ console.log(‘btn1的点击监听事件被触发‘);})}</script>添加事件监听的第三个参数，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> document.getElementById(‘btn1‘).addEventListener(‘click‘,function(e){ e.stopPropagation(); console.log(‘btn1的点击监听事件被触发‘);},false);原文：https://www.cnblogs.com/Zxq-zn/p/11691837.html