关于事件冒泡

老师可以举一个例子吗，谢谢

qq_鸭绿桥第一帅哥_0 2019-02-13

源自：jQuery事件 6-1 事件绑定与取消-on（上）

收起

2回答

山河远阔ZZ 回答被采纳获得+3积分 2019-02-13 19:03:10

同学你好，事件从外往里执行的是捕获，从里到外执行的是冒泡，在这个阶段先做一下简单的了解即可，因为这个阶段是属于入门，太深入的内容可能不太容易理解，后面第三阶段深入的js部分会做详细的讲解。

祝学习愉快！

收起回答

山河远阔ZZ 2019-02-13 15:15:28

同学你好，可以参考下面例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {

        border: 1px solid red;
    }
    </style>
</head>

<body>
    <div id="one">
        one
        <div id="two">
            two
            <div id="three">three</div>
        </div>
    </div>
</body>
<script>
var one = document.getElementById('one'),
    two = document.getElementById('two'),
    three = document.getElementById('three');
three.onclick = function() {
    alert("three")
}
two.onclick = function() {
    alert("two")
}
one.onclick = function() {
    alert('one')
}
</script>

</html>

事件冒泡：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

当点击three标签的时候，先执行了three的函数，在往上执行了two的函数，又执行了one的函数。

当点击了two标签的时候，先执行了two的函数，再往上又执行了one的函数。

可以测试一下，如果帮助到了你，欢迎采纳。

祝学习愉快！

收起回答