<body>
<input type="button" value="单击事件">
<script type="text/javascript">
var btn = document.querySelector('input');
//传统的监听方式 事件会被覆盖 这里只会执行后面的点击了2
// btn.onclick = function(){
// console.log('点击了1');
// }
// btn.onclick = function(){
// console.log('点击了2');
// }
//现在的监听方式 这里 2个点击事件都会被执行
// btn.addEventListener('click',function(){
// console.log('点击了1');
// })
// btn.addEventListener('click',function(){
// console.log('点击了2');
// })
// 监听事件 里面的函数是一个 回调函数 可以写在外面 下面这种写法也支持
// btn.addEventListener('click',showmsg());//这里showmsg括号不需要写 写了 函数会直接执行了
// btn.addEventListener('click',showmsg);
// function showmsg(){
// console.log('点击了3');
// }
//传统的事件删除方式
// btn.onclick = function(){
// console.log('点击了');
// }
// btn.onclick = null;
// 监听方式 删除事件
//这里的函数名后面不用加（）--函数名是showmsg
btn.addEventListener('click',showmsg);
function showmsg(){
console.log('点击了3');
}
btn.removeEventListener("click",showmsg);
</script>
</body>
<body>
<!-- 事件流 -->
<div class="father">
<div class="son">点击事件</div>
</div>
<script type="text/javascript">
//现在我们给这2个div标签都加点击事件 那么事件执行的流程是什么样的 谁先执行 谁后执行？
var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('click',function(){
alert('father');
})
son.addEventListener('click',function(e){
alert('son');
//阻止冒泡事件
e.stopPropagation();
})
document.addEventListener('click',function(){
alert('document');
})
// 结果 从里到外执行 son - father - document(html) ->事件冒泡/冒泡事件
//结果是 从外到里执行 document - father - son ->捕获事件
// father.addEventListener('click',function(){
// alert('father');
// },true)
// son.addEventListener('click',function(){
// alert('son');
// },true)
// document.addEventListener('click',function(){
// alert('document');
// },true)
</script>
</body>