默认只在冒泡阶段触发：outer<body<document<window
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#outer{width: 300px;height: 300px;background: yellow;overflow: hidden;}#center{width: 200px;height: 200px;margin: 20px;background: blue;overflow: hidden;}#inner{width: 100px;height: 100px;margin: 20px;background: red;}</style>
</head>
<body><div id="outer"><div id="center"><div id="inner"></div></div></div><script>inner.onclick = function(){console.log("inner")}center.onclick = function(){console.log("center")}outer.onclick = function(){console.log("outer")}document.body.onclick = function(){console.log("document.body")}document.documentElement.onclick = function(){console.log("document.documentElement")}document.onclick = function(){console.log("document")}window.onclick = function(){console.log("window")}// 标准的dom事件流// 捕获：window<document<body<outer// 目标：inner// 冒泡：outer<body<document<window// 默认情况，只在冒泡下触发</script>
</body>
</html>如果想全触发需要单独配置，默认参数是false，改成true即可
用的很少
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#outer{width: 300px;height: 300px;background: yellow;overflow: hidden;}#center{width: 200px;height: 200px;margin: 20px;background: blue;overflow: hidden;}#inner{width: 100px;height: 100px;margin: 20px;background: red;}</style>
</head>
<body><div id="outer"><div id="center"><div id="inner"></div></div></div><script>// 标准的dom事件流// 捕获：window<document<body<outer// 目标：inner// 冒泡：outer<body<document<window// 默认情况，只在冒泡下触发inner.addEventListener("click",function(){console.log("inner")})center.addEventListener("click",function(){console.log("center")})outer.addEventListener("click",function(){console.log("outer")})document.body.addEventListener("click",function(){console.log("document.body")})document.documentElement.addEventListener("click",function(){console.log("document.documentElement")})window.addEventListener("click",function(){console.log("window")})// 默认false,改成true 用的很少inner.addEventListener("click",function(){console.log("inner-捕获")},true)center.addEventListener("click",function(){console.log("center-捕获")},true)outer.addEventListener("click",function(){console.log("outer-捕获")},true)document.body.addEventListener("click",function(){console.log("document.body-捕获")},true)document.documentElement.addEventListener("click",function(){console.log("document.documentElement-捕获")},true)window.addEventListener("click",function(){console.log("window-捕获")},true)</script>
</body>
</html>
_web前端开发设计_荆州百度推广_百度一下首页手机版)
