事件流
事件流的介绍:
事件流描述的是从页面中接收事件的顺序.
事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.
事件流包括两种模式：事件冒泡和事件捕获.
事件冒泡:是值子元素和父元素具备同样的事件,当触发子元素的事件时,也会触发父元素的事件(由内至外).子集元素先触发，父级元素后触发.
事件捕获:与事件冒泡相反,父级元素先触发，子集元素后触发.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div_01{
width: 300px;
height: 300px;
background: red;
}
.div_02{
width: 150px;
height: 150px;
background: aqua;
}
</style>
<script type="text/javascript">
window.function(){
var div_01=document.getElementsByClassName('div_01')[0];
var div_02=document.getElementsByClassName('div_02')[0];
var arr_01=[div_02,div_02,document,document.body];
for(var i=0;i<arr_01.length;i++){
arr_01[i].function(){
console.log(this);
}
}
}
</script>
</head>
<body>
<button id="but1">按钮1</button>
<button id="but2">按钮2</button>
<div class="div_01">
<div class="div_02"></div>
</div>
</body>
事件兼容
事件的绑定
语法:
第一个参数是事件的类型(如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 “on” 前缀.例如,使用 “click” ,而不是使用 “onclick”.
通过 addEventListener（添加点击事件监听器）形式的绑定事件不 会互相抵消，从而实现一个按钮控制多个事件。
<script type="text/javascript">
window.function(){
var btn2=document.getElementById('btn2');
btn2.addEventListener('click',function(){
alert('第一个');
},false);
btn2.addEventListener('click',function(){
alert('第二个');
},false);
</script>
<body>
<button id="btn2">按钮 2</button>
</body>
事件的移除
想要移除一个元素的事件，前提条件事件处理程序必须是一个有名称的函数
<script type="text/javascript">
window.function(){
var btn1=document.getElementById('btn1');
btn1.addEventListener('click',show,false);
function show(){
alert('第一个');
}
btn1.removeEventListener('click',show,false);//事件的移除
}
</script>
<body>
<button id="btn1">按钮 1</button>
</body>
阻止冒泡
语法结构：
事件对象.stopPropagation()
<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(){
document.getElementById('box1').addEventListener('click',function(event){
alert('最外层div');
});
document.getElementById('box2').addEventListener('click',function(event){
alert('第二层div');
});
document.getElementById('span').addEventListener('click',function(event){
alert('最里面span元素');
event.stopPropagation(); //阻止事件冒泡
});
}
</script>
<body id="body">
<div id="box1" class="box1">
<div id="box2" class="box2">
<span id="span">This is a span.</span>
</div>
</div>
</body>
阻止默认
语法结构：
事件对象.preventDefault()
<script type="text/javascript">
window.function(){
var a1=document.getElementsByTagName('a')[0];
a1.addEventListener('click',function(evevt){
if(event.preventDefault()){
event.preventDefault();
}else{
window.event.returnValue=false;
}
})
}
</script>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
闭包及闭包的应用
事件闭包的理解:闭包是指有权限访问另一个函数作用域中的变量的函数.在 javascript 语言中,闭包就是函数和该函数作用域的组合.在JavaScript中任何一个函数都是一个闭包,但是嵌套的函数功能更强(闭包的作用更加强大,产生一个作用域链)
变量的作用域:要理解闭包,首先必须理解 Javascript 特殊的变量作用域.变量的作用域无非就是两种:全局变量和局部变量.
Javascript 语言的特殊之处,就在于函数内部可以直接读取全局 变量.另一方面,在函数外部自然无法读取函数内的局部变量.
注:在函数内部声明变量的时候,一定要使用var命令.如果不用的话,你实际上声明了一个全局变量!不如写在函数之外.
如何从外部读取局部变量:
出于种种原因,我们有时候需要得到函数内的局部变量.但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才 能实现. 那就是在函数的内部,再定义一个函数.
父对象的所有变量,对子对象都是可见的,反之则不成立,从而形成js中特殊的作用域链 scope chain;
<script type="text/javascript">
function rengh(){
var color='yellow';
var width=200+'px';
var height=300+'px';
function linggh(){
return color;
}
return linggh();
}
alert(rengh());
</script>
闭包的再一次理解:
闭包就是能够读取其他函数内部变量的函数;由于在 Javascript 语言中,只有函数内部的子函数才能读取局部 变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”. 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁.
闭包的应用:
闭包可以使用在许多地方.它的最大作用有两处,一个是前面提到 的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.
<script type="text/javascript">
function Student(){
var color='yellow';
var height=1.82;
var weight=60;
//第一种方法 不常用(不强大);
//return '肤色:'+color+'身高:'+height+'体中:'+weight;
//第二种方式: 通过在函数体内定义函数 返回,功能更加强大
function Student_01(){
return '肤色:'+color+'身高:'+height+'体中:'+weight;
}
return Student_01();
}
// 对于以上案例: Student_01() 就是一个闭包函数
// 闭包就是能够读取其他函数内部变量的函数
//有个老师对象 想访问学生对象的属性(详细信息)
function Teacher(){
alert(Student());
}
Teacher();
/*闭包可以使用在许多地方.它的最大作用有两处:
一个是前面提到的可以读取函数内部的变量，
另一个就是让这些变量的值始终保持在内存中*/
</script>
定时器
定时器有以下两种方法:
SetInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式,方法会不停的调用函数,直到clearInterval()被调用或者窗口被关闭.
SetTimeout():在指定的毫秒数后调用函数或计算表达式.
setInterval();循环定时器：固定时间间隔指定一次,像闹钟 一样,不关闭继续执行.
语法结构
setInterval(code,millisec,lang)
code： 必需。要调用的函数或要执行的代码串。
millisec：必须。周期性执行或调用 code 之间的时间 间隔，以毫秒计
lang： 可选。 JScript | VBScript | JavaScript
每三秒弹出一个 hello
<script type="text/javascript">
var time=setInterval(function(){//循环定时器
document.write('hello');
},3000)
</script>
显示当前时间，通过按钮实现时间的停止，开始
<script type="text/javascript">
var mytimer;
function startTimer(){
mytimer=setInterval('myDate()',1000);
}
function myDate(){
var timeDate=new Date();//获取当前时间
var times=timeDate.toLocaleTimeString();//将日期时间转换为字符串类型
document.getElementById('demo').innerHTML=times;
}
function stopTimer(){
clearInterval(mytimer);
}
</script>
<body>
<h4 id="demo">setInterval()计时器函数</h4>
<input type="button" "startTimer()" value="开始"/>
<input type="button" "stopTimer()" value="停止" />
</body>
**SetTimeout();**炸弹定时器:只执行一次,不能执行下一次了.
实现一个页面的简易版时钟
<script type="text/javascript">
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=ghTime(m);
s=ghTime(s);
document.getElementById('txt').innerHTML=h+':'+m+':'+s;
t = setTimeout('startTime()', 500);
}
function ghTime(i){
if(i < 10){
i='0'+i
}
return i;
}
</script>
<body "startTime()">
<div id="txt"></div>
</body>
扫一扫
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
