事件流

事件流描述的是从页面中接收事件的顺序。
事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：
冒泡和捕获。

事件捕获

父级元素先触发，子集元素后触发；(前提: 他们必须具备同样的事件)

                    //事件对象.addEventListener(事件类型,事件处理程序/监听程序,是否冒泡还是捕获)
			     	arr[i].addEventListener('click',function(){
						console.log(this);
					},true);  //true表示的是事件捕获

事件冒泡

子集元素先触发，父级元素后触发；

                    arr[i].addEventListener('click',function(){
						console.log(this);
					},false);  //false表示的是事件冒泡

事件兼容

事件绑定、事件移除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.function(){
				var btn1=document.getElementById('btn1');
				var btn2=document.getElementById('btn2');
			    //1,事件绑定  通过addEventListener() 注册事件处理程序
				btn2.addEventListener('click',show1);
				btn2.addEventListener('click',show2)
				function show1(){
					console.log('第一个');
				}
				function show2(){
					console.log('第二个');
				}
				//2.移除事件监听程序,使用事件移除removeEventListener()方法的时候一定要保证事件的处理监听程序 不是匿名函数
				btn2.removeEventListener('click',show1);
		</script>
	</head>
	<body>
		<button id="btn1">按钮1</button>
		<button id="btn2">按钮2</button>
	</body>
</html>

获取事件对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.function(){
				var btn1=document.getElementById('btn1');				
				btn1.onclick=function(ev){  
					if(window.event){
						ev=window.event;
					}
					//结果为"[object MouseEvent]"
					console.log(ev);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="点击试试" id="btn1" />
	</body>
</html>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function handle(oEvent){
				if(window.event){
					oEvent=window.event
				}
				var oTarget='';
				if(oEvent.srcElement){  //兼容低版本的ie
					oTarget=oEvent.srcElement;
				}else{
					oTarget=oEvent.target;
				}
				//[object HTMLImageElement]  返回触发事件的元素
				alert(oTarget);	
			}
			window.function(){
				var img_01=document.getElementsByTagName('img')[0];
				img_01.onclick=handle;
			}
		</script>
	</head>
	<body>
		<img src="img/banner0.png" width="500" height="250" />
	</body>
</html>

鼠标事件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function headle(oEvent){
				if(window.event){
					oEvent=window.event;
					//获取事件类型
					//div1.innerHTML+=oEvent.type;
					//获取鼠标当前的位置  水平位置和垂直位置
					div1.innerHTML+='水平:'+oEvent.pageX+'垂直:'+oEvent.pageY;				
				}
			}
			var img_01;
			var div1;
			window.function(){
				img_01=document.getElementsByTagName('img')[0];
				div1=document.getElementById('div1');
				img_01.onmousedown=headle;
				img_01.onmouseleave=headle;
			}
		</script>
	</head>
	<body>
		<img src="img/banner0.png"  />
		<div id="div1"></div>
	</body>
</html>

阻止冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阻止事件冒泡</title>
		<style type="text/css">
			.box1 {
				border: green 40px solid;
				width: 300px;
				height: 300px;
				margin: auto;
			}
			.box2{
				border: yellow 40px solid;
				width: 220px;
				height: 220px;
				margin: auto;
			}
			span{
				position: relative;
				left: 50px;
				top: 50px;
				background-color: rgba(128, 128, 128, 0.22);
			}
		</style>
		<script type="text/javascript">
			window.function(){
				var box1=document.getElementById('box1');
				var box2=document.getElementById('box2');
				var span=document.getElementById('span');
				box1.addEventListener('click',function(event){
					alert('点击了最外层的div');
					 //阻止事件冒泡
					event.stopPropagation(); 
				});
				box2.addEventListener('click',function(event){
					alert('点击了第二个div');
					 //阻止事件冒泡
					event.stopPropagation(); 
				})
				span.addEventListener('click',function(){
					alert('点击了span元素');
					 //阻止事件冒泡
					event.stopPropagation();
				})
			}			
		</script>
	</head>
	<body id="body">
		<div id="box1" class="box1">
			<div id="box2" class="box2">
				<span id="span">This is a span</span>
			</div>
		</div>
	</body>
</html>

阻止默认

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阻止默认</title>
		<script type="text/javascript">	
			window.function(){
				var a_01=document.getElementsByTagName('a')[0];
				a_01.addEventListener('click',function(event){
				    //阻止默认行为  不能够实现跳转
					event.preventDefault();
				})
			}
		</script>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

闭包

闭包是指有权限访问另一个函数作用域中的变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

变量的作用域

变量的作用域：
全局变量和局部变量。
函数内部可以直接读取全局变量,在函数外部无法读取函数内的局部变量.

如何从外部读取局部变量

就是在函数的内部，再定义一个函数。父对象的所有变量，对子对象都是可见的，反之则不成立。

闭包的作用

一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

事件流、事件兼容、闭包

事件流