事件的冒泡和捕获 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>
            <button>这是一个按钮</button>
        </h1>
        
        <script type="text/javascript">
            var btn = document.querySelector('button')
            var h1 = document.querySelector('h1')
            var body = document.querySelector('body')
            
            
            //第三个参数为true的时候，那么就是捕获，为false就是默认值，那么就是冒泡事件
            btn.addEventListener('click',function(e){
                console.log(e)
                e.cancelBubble = false
                console.log('btn监听的事件')
            },false)
            
            h1.addEventListener('click',function(e){
                console.log('h1监听的事件')
            },false)
            
            
            body.addEventListener('click',function(e){
                console.log('body的事件')
            },false)
        </script>
    </body>
</html>

 

posted @ 2019-03-18 21:41  就这样子吧  阅读(121)  评论(0)    收藏  举报