一、事件流
(1)事件冒泡（false）
指的是子元素和父元素具备同样的事件，当触发子元素的事件时，也会触发父元素的事件。（从内到外）
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\">
< >事件冒泡</ >
< type=\"text/ \">
window. =function(){
var div1=document.getElementById(\'div1\');
var div2=document.getElementById(\'div2\');
div1.style.width=300+\'px\';
div1.style.height=300+\'px\';
div1.style.border=\'1px solid black\';
div2.style.width=200+\'px\';
div2.style.height=200+\'px\';
div2.style.border=\'1px solid blue\';
div1. =function(){
div1.style.background=\'pink\';
}
div2. =function(){
div2.style.background=\'plum\';
}
}
</ >
</head>
<body>
<div id=\"div1\">
<div id=\"div2\">内部的子元素div</div>
</div>
</body>
</html>
(2)事件捕获（true）
父元素先触发，子元素后触发（从外到内）
二、事件兼容
(1)事件绑定
主流使用Dom2级事件
提供的方法:
addEventListener(事件类型,时间的处理程序,事件是否冒泡/时间是否捕获);
移除事件的处理程序/移除事件的监听器：removeEventListener(事件类型,时间的处理程序,事件是否冒泡/事件是否捕获);
注意：如果添加的事件处理函数将来想要移除就不能使用匿名函数。
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\">
< >事件绑定</ >
< type=\"text/ \">
window. =function(){
var btn=document.getElementById(\'btn\');
btn.addEventListener(\'click\',show,false);
function show(){
alert(\'张艺兴来袭\');
}
}
</ >
</head>
<body>
<input type=\"button\" value=\"提交\" id=\"btn\" />
</body>
</html>
(2)事件对象Event
获取触发事件的目标对象: e.target || e.srcElement
获取当前的事件类型: e.type
返回引发事件的元素名称: e.tagName
获取事件触发时的具体时间: e.timestamp
获取当前所绑定的事件元素: e.currentTarget
< type=\"text/ \">
window. =function(){
var img1=document.getElementById(\'img1\');
img1. =Photos;
}
function Photos(oEvent){ //形参
if(window.event){
oEvent=window.event;
}
var oTarget;
if(event.srcElement){
//获取触发事件的元素
oTarget=event.srcElement;
}else{
oTarget=event.target;
}
//返回事件目标的名称 使用属性tagName
alert(oTarget.tagName); //获取事件目标 的名称
}
</ >
(3)阻止事件冒泡
e.stoppropagation();
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\">
< >阻止冒泡</ >
< rel=\"stylesheet\" type=\"text/css\" href=\"css/Demo1.css\"/>
< type=\"text/ \">
window. =function(){
var box1=document.getElementById(\'box1\');
box1.addEventListener(\'click\',function(event){
alert(\'你点击了box1\');
event.stopPropagation(); //阻止事件的冒泡产生
})
var box2=document.getElementById(\'box2\');
box2.addEventListener(\'click\',function(event){
alert(\'你点击了box2\');
event.stopPropagation();
})
var span=document.getElementById(\'span\');
span.addEventListener(\'click\',function(event){
alert(\'你点击了span\');
event.stopPropagation();
})
}
</ >
</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>
(4)阻止默认
event.preventDefault();
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\">
< >阻止默认</ >
< type=\"text/ \">
window. =function(){
// w3c 的方法是 e.preventDefault()，
// IE 则是使用 e.returnValue =false;
var a=document.getElementsByTagName(\'a\')[0];
// a. =function(event){ //传统方式
// //alert(\'导师\');
// event.preventDefault(); //阻止默认
// }
a.addEventListener(\'click\',function(e){
e.preventDefault(); //w3c标准
if(e.preventDefault()){
e.preventDefault();
}else{
e.returnValue=false; //IE提供阻止默认的方式
}
})
}
</ >
</head>
<body>
<a href=\"阻止冒泡.html\" target=\"_blank\">偶像练习生</a>
</body>
</html>
三、函数闭包
闭包
是指有权限的访问另一个函数作用域中的变量的函数。换句话说，一个函数可以访问另一个函数的局部变量。
在js中任何一个函数都是一个闭包，但是嵌套的函数闭包作用更大，产生一个作用域链。
变量的作用域：分为两种，全局变量、局部变量
问题：如何从外部读取函数内部的变量？
解决：在函数体内嵌套函数—父对象的所有变量，对子对象都是可见的，反之则不成立。
闭包的作用
①可以读取函数内部的变量 ②让这些变量的值始终保持在内存中
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\">
< >闭包案例</ >
< type=\"text/ \">
function person(){
var color=\'yellow\';
var weight=60;
var height=1.83;
function person_01(){
return \'肤色:\'+color+\'身高:\'+height+\'体重:\'+weight;
}
return person_01();
}
alert(person()); //可直接弹出
// function teacher(){ //定义一个变量来弹出
// alert(person());
// }
// teacher();
</ >
</head>
<body>
</body>
</html>
四、定时器
循环定时器
setInterval()：按照指定的周期来调用函数或计算表达式，会不停调用，直到clearInterval()被调用或窗口被关闭。放到函数体外
<!DOCTYPE html>
<html>
<head>
< charset=\"utf-8\">
< ></ >
< type=\"text/ \">
/*JS中的定时器分为两种:
(1)循环定时器:setInterval():循环执行(调用函数)
(2)炸弹定时器:setTimeout(): 只执行一次*/
// var time=setInterval(function(){
// alert(\'hello\');
// },3000)
// clearInterval(time); //清除计时器
var timer=setInterval(\'times()\',1000);
function times(){
var timedate=new Date();
var h=timedate.getHours();
var m=timedate.getMinutes();
var s=timedate.getSeconds();
minutes=checkeds(minutes);
second=checkeds(second);
document.getElementsByTagName(\'body\')[0].innerHTML=h+\':\'+m+\':\'+s;
}
function checked(value){
if(value<10){
value=\'0\'+value;
}
return value;
}
</ >
</head>
<body>
</body>
</html>
炸弹定时器
setTimeout():在指定的毫秒数后调用函数或计算表达式。只会执行一次，放在函数体内。
function myTime(){
var time=new Date();
var hours=time.getHours();
var minutes=time.getMinutes();
var second=time.getSeconds();
minutes=checkeds(minutes);
second=checkeds(second);
document.getElementById(\'div1\').innerHTML=\'当前时间为:\'+hours+\'时\'+minutes+\'分\'+second+\'秒\';
setTimeout(\'myTime()\',1000);
}
function checkeds(value){
if(value<10){
value=\'0\'+value;
}
return value;
}
倒计时案例：
var num=5;
function btn(){
num--;
var btn1=document.getElementById(\'btn1\');
btn1.value=num+\'s后重新获取\';
var timer=setTimeout(\'btn()\',1000);
if(num<=0){
clearTimeout(timer);
btn1.value=\'请重新获取验证码\';
num=5;
}
}
</ >
</head>
<body>
<input type=\"button\" id=\"btn1\" value=\"获取验证码\" =\"btn();\" />
继续阅读与本文标签相同的文章
上一篇 :
自学编程的六个技巧总结
下一篇 :
堆排序,图片与算法
-
干货送上，小程序运动步数实战分享
2026-05-19栏目： 教程
-
ZAO 背后的深度学习算法原理浅析
2026-05-19栏目： 教程
-
应用优雅上下线
2026-05-19栏目： 教程
-
FFMPEG常用命令收录（持续更新)
2026-05-19栏目： 教程
-
OpenSSL 1.1.1的裁剪
2026-05-19栏目： 教程