<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1> <button>这是一个按钮</button> </h1> <script type="text/javascript"> var btn = document.querySelector('button') var h1 = document.querySelector('h1') var body = document.querySelector('body') //第三个参数为true的时候,那么就是捕获,为false就是默认值,那么就是冒泡事件 btn.addEventListener('click',function(e){ console.log(e) e.cancelBubble = false console.log('btn监听的事件') },false) h1.addEventListener('click',function(e){ console.log('h1监听的事件') },false) body.addEventListener('click',function(e){ console.log('body的事件') },false) </script> </body> </html>