JS学习之事件流

事件流
1、在事件触发时，会先执行一个阶段‘捕获阶段’ ，从最外层向触发该事件元素寻找的一个过程。最终找到触发该事件的元素，如果该元素有绑定事件处理函数则执行该函数
2、在找到触发该事件的元素之后，如果该元素身上有事件就会执行，成为‘目标阶段’。
3、接下来执行‘冒泡阶段’，从目标元素的上一层往外找，直到最外层时结束整个时间流程
注意：不论是捕获阶段还是冒泡阶段，在寻找目标元素的过程和向外返回的过程中，所遇到每一个元素身上如果有相同的事件处理函数都被会调用
低版本IE浏览器事件只能绑定在冒泡阶段。

 1 <!DOCTYPE html>
 2 <html lang="en" id='html'>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>函数的学习</title>
 7     <style>
 8         #div{
 9             200px;
10             height: 200px;
11             background: green;
12             font-size: 50px;
13         }
14         #span{
15             display: inline-block;
16              50px;
17             height: 50px;
18             background: red;
19             font-size:20px;
20             line-height: 50px;
21             color:#fff;
22         }
23     </style>
24

29 </head>
30 
31 <body id='body'>
32     <div id="div">
33         div
34         <span id="span">
35             span
36         </span>
37     </div>
38     <script>
39         var div=document.getElementById("div");
40         var span=document.getElementById("span");
41         var body=document.getElementById("body");
42         var html=document.getElementById("html");
43         window.id="window1";
44         function fn(){
45             console.log(this.id);
46         }
47         //用on的方法给元素添加事件先触发事件源对象，然后再往外执行（冒泡阶段）
48         window.onclick=fn;  //window1
49         html.onclick=fn;    //html  window1
50         body.onclick=fn;   //body  html window1
51         div.onclick=fn;      //div   body html   window1
52         span.onclick=fn;   //span  div  body   html   window1   
53       
54     </script>
55 </body>
56 
57 </html>

1 //用addEventListener 添加事件,最后一个参数为false代表冒泡阶段,与on添加的事件是一样的
2         window.addEventListener('click',fn,false);
3         html.addEventListener('click',fn,false);
4         body.addEventListener('click',fn,false);
5         div.addEventListener('click',fn,false);
6         span.addEventListener('click',fn,false); //span  div  body   html   window1

1       // 表示事件会在捕获的阶段执行，从最外面先执行再到事件源目标
2         window.addEventListener('click',fn,true);
3         html.addEventListener('click',fn,true);
4         body.addEventListener('click',fn,);true
5         div.addEventListener('click',fn,true);
6         span.addEventListener('click',fn,true); // window1 html body div span

注意：目标元素事件的执行顺序是按照目标元素的事件书写顺序执行的，就是谁写前面先执行谁

 1         span.addEventListener('click',function(){
 2             console.log("捕获");
 3         },true);
 4         span.addEventListener('click',function(){
 5             console.log("冒泡");
 6         },false);
// span元素上同时绑了2个事件，控制台输出的答案是 捕获  冒泡，按照书写顺序来

1     span.addEventListener('click',function(){
2             console.log("冒泡");
3         },false)
4      span.addEventListener('click',function(){
5             console.log("捕获");
6         },true);
7       // 输出的答案是  冒泡  捕获 ，按照书写顺序来

阻止浏览器的默认行为

浏览器的默认行为
非JS添加，自身会有的一些功能

阻止浏览器的默认行为
需要知道这些默认行为什么时候发生
1、on 添加的事件在函数里写一句 return false
2、addEventlistener 添加的事件
在函数里调用event 身上的preventDefault()

3 当点击鼠标右键会有一个下拉菜单这些都是浏览器的默认行为

 1  <body id='body'>
 2           <a href="www.baidu.com">百度</a> <br/><br/><br/><br/>
 3           <img src="1.jpg" alt=""/>
 4     <script>
 5     
 6         var a=document.querySelector("a");
 7         var img=document.querySelector("img");
 8       
 9         //阻止a的跳转
10         a.onclick=function(){
11                        return false;
12         }
13         //阻止图片的默认拖拽
14         img.addEventListener("mousedown",function(e){
15              e.preventDefault();
16         });
17         //ondragstart 是h5中的阻止拖拽
18         img.ondragstart=function(){
19                 return  false;
20         }
21         // 阻止右键菜单
22         document.oncontextmenu=function(){
23             return false;
24         }
25     </script>