如何理解jquery事件冒泡
1个回答
展开全部
事件冒泡（IE提出）：
从最具体的元素接收，然后逐级向上传播到较为不具体的节点
事件捕获：
从较为不具体的节点接收，然后逐级向下到最具体的元素。
PS：假设有一个文档，节点为 html→body→div→button 。
事件冒泡的传播顺序是：button→div→body→html→document→window，
事件捕获的传播顺序是：window→document→html→body→div→button。
具体是不是这样我忘了，反正两个是相反的。
举个例子：
事件冒泡：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function body_click() {
alert('Body被点击了')
}
function div_click() {
alert('Div被点击了')
}
function button_click() {
alert('Button被点击了')
}
</script>
</head>
<body onclick="body_click()">
<div onclick="div_click()">
<button onclick="button_click()">事件冒泡</button>
</div>
</body>
</html>
点击之后会依次弹窗（注意顺序）：Button被点击了、Div被点击了、Body被点击了。（从具体的节点传播至最不具体的节点）
然后是事件捕获：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function() {
document.getElementById('btn').addEventListener('click',function (e) {
alert('Button被点击了')
},true);
document.getElementById('div').addEventListener('click',function (e) {
alert('Div被点击了')
},true);
document.getElementById('body').addEventListener('click',function(e) {
alert('Body被点击了')
},true);
}
</script>
</head>
<body id="body">
<div id="div">
<button id="btn">事件捕获</button>
</div>
</body>
</html>
点击之后会依次弹窗（注意顺序）：Body被点击了、Div被点击了、Button被点击了。（从不具体的节点传播至最具体的节点）
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
