事件流
事件流描述的是从页面中接收事件的顺序。
事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:
冒泡和捕获。
事件捕获
父级元素先触发,子集元素后触发;(前提: 他们必须具备同样的事件)
//事件对象.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>
闭包
闭包是指有权限访问另一个函数作用域中的变量的函数。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
变量的作用域
变量的作用域:
全局变量和局部变量。
函数内部可以直接读取全局变量,在函数外部无法读取函数内的局部变量.
如何从外部读取局部变量
就是在函数的内部,再定义一个函数。父对象的所有变量,对子对象都是可见的 ,反之则不成立。
闭包的作用
一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中