<!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>
