<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#demo{
height: 300px;
width: 300px;
background-color: red;
}
#btn{
height: 100px;
width: 100px;}
</style>
</head>
<body>
<div id="demo">
<button id="btn">btn</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var demo = document.querySelector('#demo')
var btn = document.querySelector('#btn')
// 阻止冒泡事件
// demo.onclick= function (e) {
// e.stopPropagation();
// console.log(111)
// }
// btn.onclick= function (e) {
// e.stopPropagation();
// console.log(222)
// }
// document. body.onclick= function (e) {
// e.stopPropagation();
// console.log(333)
// }
// 捕获事件
// JQ重复不会被覆盖
JQ代码
// $('#demo').click(function () {
// console.log(55555);
// })
// $('#demo').click(function () {
// console.log(66666);
//,true })//加true变成捕获事件 顺序变反
//Js代码
btn.addEventListener('click',function(e){
e.stopPropagation();
console.log(55555);
},false)
demo.addEventListener('click',function(){
console.log(66666);
},false)
document.body.addEventListener('click',function(){
console.log(7777);
},false)
</script>
