JavaScript 事件冒泡,事件捕获,事件委托
Posted 过往将来
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 事件冒泡,事件捕获,事件委托相关的知识，希望对你有一定的参考价值。
事件冒泡
- 事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。由内外的处理事件
- 事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。由外而内的处理事件
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style media="screen">
#box1 { width: 300px; height: 300px; background: blueviolet; }
#box2 { width: 200px; height: 200px; background: aquamarine; }
#box3 { width: 100px; height: 100px; background: tomato; }
div { overflow: hidden; margin: 50px auto; }
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
<script type="text/javascript">
function sayBox3(event) {
console.log('你点了最里面的box');
}
function sayBox2() {
// console.log(event)
// event.stopPropagation();
console.log('你点了最中间的box');
}
function sayBox1() {
console.log('你点了最外面的box');
}
// 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获 结果为： 你点了最里面的box 你点了最中间的box 你点了最外面的box
document.getElementById('box3').addEventListener('click', sayBox3, false);
document.getElementById('box2').addEventListener('click', sayBox2, false);
document.getElementById('box1').addEventListener('click', sayBox1, true);
</script>
</html>
阻止事件冒泡
- 阻止浏览器默认进行的事件冒泡使用的
function sayBox3(event) {
event.stopPropagation();
console.log('你点了最里面的box');
}
事件委托简介
- 事件委托：将所有元素的事件绑定委托给同一个父元素，根据事件冒泡捕获机制，可以在父元素绑定事件中获取的触发事件的这个元素，
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p
</div>
<script>
// var p = document.querySelectorAll('p');
// for ( var i = 0; i < p.length; i++) {
// p[i].onclick = function() {
// this.style.backgroundColor = 'pink';
// }
// }
// 利用事件委托，减少事件数量
var div = document.getElementsByTagName('div')[0];
div.onclick = function(e) {
var dom = e.target;
if (dom.tagName.toUpperCase() === 'P') {
dom.style.backgroundColor = 'red';
} else if (dom.tagName.toUpperCase() === 'H1') {
dom.style.backgroundColor = 'green';
}
}
// 利用事件委托，可以预言未来元素，为新元素绑定事件
// 创建一个新成员 新创建的元素也可以使用事件委托
var newH1 = document.createElement('h1');
newH1.innerHTML = '新的h1';
div.appendChild(newH1);
</script>
以上是关于JavaScript 事件冒泡,事件捕获,事件委托的主要内容，如果未能解决你的问题，请参考以下文章