Event bubbling, in which an event is initially received by the most specific element (the node with the deepest nesting level in the document) and then propagated up the hierarchy to the less specific node (the document). Event capture, that is, the less specific nodes should receive events earlier, and the most specific nodes should receive events last. Because older browsers don’t support event capture, few use it. It is recommended that you use event bubbling with confidence and use event capture only for special needs. \

\

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <div id="myDiv1" style="background: #00ad36; height: 300px; width: 300px; position: relative;">
        <div id="myDiv2" style="background: #00a0e9; height: 100px; width: 100px; left: 50%; top:50%; position: absolute; margin-left: -50px; margin-top: -50px; text-align: center; line-height: 100px;">Click</div>
    </div>
    <script type="text/javascript">
        $('#myDiv1').click(function () {
           console.log('Clicked on the external DIV');
        });
        $('#myDiv2').click(function () {
            console.log('Clicked inside DIV');
        });
    </script>
</body>
</html>
Copy the code

\

\

\

\