- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title> 事件传播控制 </title>
- <style>
- div{
- width: 300px;
- height: 50px;
- background-color: red;
- color: white;
- }
- </style>
- </head>
- <body>
- <section>
- <div>
- <a href="https://www.baidu.com"> 这个可以点击 </a>
- </div>
- </section>
- <script>
- var div =document.querySelector('div')
- var sec =document.querySelector('section')
- document.documentElement.addEventListener('click',function(){alert ('HTML - 挖洞 ')},true)
- document.documentElement.addEventListener('click',function(){alert ('HTML - 冒泡 ')},false)
- document.body.addEventListener('click',function(){alert ('body - 挖洞 ')},true)
- document.body.addEventListener('click',function(){alert ('body - 冒泡 ')},false)
- sec.addEventListener('click',function(e){
- alert ('section - 挖洞 ')
-
-
-
-
-
-
-
- e.preventDefault()
-
-
- },true)
- sec.addEventListener('click',function(e){
- alert ('section - 挖洞 2')
-
- },true)
- sec.addEventListener('click',function(e){
- alert ('section - 冒泡 ')
-
-
- e.defaultPrevented =false
-
- },false)
- div.addEventListener('click',function(){alert ('div - 挖洞 ')},true)
- div.addEventListener('click',function(){alert ('div - 冒泡 ')},false)
-
-
- sec.onclick =function(){
- alert (' 哪个阶段调用 ')
- }
-
- </script>
- </body>
- </html>