EventTarget.addEventListener() - Web API 接口参考
EventTarget.addEventListener() - Web API 接口参考
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#%E8%AF%AD%E6%B3%95
<!DOCTYPE html>
<html lang="zh-CN>
<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>
div {
padding: 15px;
border: 1px solid #e5f3fe;
position: relative;
overflow: hidden;
}
span {
background-color: #f2f1f1;
padding: 8px 15px;
margin: 15px;
display: inline-block;
}
.description {
font-size: 22px;
font-weight: 600;
}
</style>
</head>
<body>
<p class="description">
ok 兄弟你每次点击“节点2” 就会发现这个参数的不同点了。是不是 它的触发顺序出现了不同 对 就是这样的。
</p>
<label>
<input onchange="radioChange(this.value)" checked name="useCapture" type="radio" id="radio1" value="true" />
useCapture=true
</label>
<label>
<input onchange="radioChange(this.value)" name="useCapture" type="radio" id="radio2" value="false" />
useCapture=false
</label>
<div title="节点1">
<span>节点1</span>
<div title="节点2">
<span>节点2</span>
</div>
</div>
<script>
// 个人总结：false的话 就是事件冒泡了 从子元素到父元素
// true的话 就是事件捕获 从父到子！
let useCapture = true
// 添加事件
function bindEvent() {
const targets = document.querySelectorAll('div')
targets.forEach(element => {
element.addEventListener('click', handleClick, useCapture)
});
}
// 移除事件
function removeEvent() {
const targets = document.querySelectorAll('div')
targets.forEach(element => {
element.removeEventListener('click', handleClick, useCapture)
});
}
// div click handle
function handleClick(){
alert(this.getAttribute('title'))
}
// 处理 radio change
function radioChange(checked) {
removeEvent()
checked = new Boolean(checked)
console.log('radioChange')
console.log(checked)
useCapture = checked
bindEvent()
}
// 执行绑定事件
bindEvent()
</script>
</body>
</html>
个人总结：false的话 就是事件冒泡了 从子元素到父元素true的话 就是事件捕获 从父到子！
