目录
总结：
1.三种解绑事件
事件源.on事件类型 = null
事件源.removeEventListenner(“没有on的事件类型”，命名函数，false）
事件源.detachEvent(“没有on的事件类型”，命名函数）
2.事件冒泡
一定是盒子嵌套盒子，如果里面的盒子做了点击事件，外面的盒子和里面的盒子有相同的点击事件，外面的盒子也会触发----冒泡
满足条件：盒子嵌套，有相同事件
3.阻止事件冒泡
event.stopPropagation() event可以简写e，默认的事件对象—火狐和谷歌
window.event.cancelBubble = true 给ie低版本浏览器
4.事件委托(事件代理)
通俗一点就是事件冒泡的应用，就是自己的事不想干，叫它爸爸，甚至爷爷、甚至祖先来干。或者拿取快递来比喻都行
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。
5.事件的三个阶段
1、事件捕获：用数字代表是1（如果你看到了是数字1就是代表了捕获）— 从外到里
2、目标阶段：用数字代表是2（如果你看到了数字2就是目标阶段）—执行当前的元素
3、冒泡阶段:用数字代表是3（如果你看到了数字3就代表的是冒泡阶段）–从里到外
e.eventPhase 为了检测事件的三个阶段分别代表什么数字
一、最大的匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
//最大的匿名函数--也就是我们的入口函数，当页面加载完毕之后再执行里面的代码
//（当页面加载的时候就是相当于先把body里面的内容都执行完毕了，再执行我们的JS）
var btn = document.getElementById("btn");
btn.onclick = function () {
console.log("大家今天继续给力，优秀，棒棒哒.");
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>
二、定时器setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="清除定时器" id="btn">
<script>
/*
定时器：炸弹，闹钟（炸弹只炸一次）
我们的定时器有两种:setInterval 和 setTimeout
setInterval 使用场景轮播图效果 原子弹--不停的炸，--不停的执行下去,如果这个定时器不清除,他会一直执行。
setTimeout ----- 会用在一次性的广告里面--现在很少见---炸弹
第一、setInterval(匿名函数,时间)
参数1:是一个匿名函数
参数2：时间 单位是毫秒 1000毫秒--- 1秒 千分之一为单位
*/
var timeId = setInterval(function(){
alert("嘎嘎，来点我呀");
},2000);//2000代表2秒 就是2s
//清除定时器
var btn = document.getElementById("btn");
//点击按钮来清除定时器
btn.onclick = function(){
// window.clearInterval(timeId); 我们把前面的定时器给了timeId
// 扩展--工作里面推荐下面写法
clearInterval(timeId);
// 总结：清除定时器 window 是可以省略的，这个定时器是我们用的最多的
}
</script>
</body>
</html>
三、一起摇摆案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: absolute;
/* 运动起来一定要有定位 */
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input type="button" value="一起摇摆" id="btn1">
<input type="button" value="停止摇摆" id="btn2">
<div id="dv">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
</div>
<script src="publick.js"></script>
<script>
var timeId = "";//全局变量
my$("btn1").onclick = function(){
timeId = setInterval(function(){
// 定义一个随机数
var x = parseInt(Math.random() *100 + 1);
var y = parseInt(Math.random() *100 + 1);
// 设置元素的left属性和top属性
my$("dv").style.left = x + "px";
my$("dv").style.top = y + "px";
},10);//时间越小越快
};
// 停止定时器,清除定时器
my$("btn2").onclick = function(){
clearInterval(timeId);
}
// 现在不要去点击多次，点击多次会有bug的-----我们后面详细画图来讲解如何解决这个bug--轮播图的时候。
</script>
</body>
</html>
四、亮起来案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
height: 600px;
border: 1px solid #000;
background: black;
position: relative;/*相对定位*/
}
span{
position: absolute;/*绝对定位*/
font-size: 50px;
color:yellow
}
</style>
</head>
<body>
<input type="button" value="亮起来" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
// 因为我们这个定时器没有做清除，所以没有给变量接收
setInterval(function(){
my$("dv").innerHTML = "<span>☆</span>";
// 随机数
var x = parseInt(Math.random() * 600 + 1);
var y = parseInt(Math.random() * 600 + 1);
my$("dv").firstElementChild.style.left = x + "px";
my$("dv").firstElementChild.style.top = y + "px";
},5);
}
</script>
</body>
</html>
五、美女时钟效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="" alt="" id="im">
<script src="publick.js"></script>
<script>
setInterval(function(){
// 获取系统的日期时间
var dt = new Date();
// console.log(dt);
// 获取小时
var hour = dt.getHours();
// 获取秒钟
var second = dt.getSeconds();
// 判断长度----三元运算符
hour = hour < 10 ? "0" + hour : hour;
second = second < 10 ?"0" + second : second;
console.log(hour + "======" + second);//测试代码
// 大招 "++"
my$("im").src = "meimei/"+hour+"_"+second+".jpg";
},1000);//1000毫秒就是等于1秒 1s
</script>
</body>
</html>
六、进一步优化时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="" alt="" id="im">
<script src="publick.js"></script>
<script>
function f1(){
// 获取系统的日期时间
var dt = new Date();
// console.log(dt);
// 获取小时
var hour = dt.getHours();
// 获取秒钟
var second = dt.getSeconds();
// 判断长度----三元运算符
hour = hour < 10 ? "0" + hour : hour;
second = second < 10 ?"0" + second : second;
console.log(hour + "======" + second);//测试代码
// 大招 "++"
my$("im").src = "meimei/"+hour+"_"+second+".jpg";
}
f1();// 上来就调用一次函数，--核心思想
setInterval(f1,1000);//1000毫秒就是等于1秒 1s
//总结:我们的定时器里面可以是匿名函数，也可以是命名函数。
</script>
</body>
</html>
七、渐变效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<input type="button" value="渐变" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
var opacity = 10;//为了避免小数出现bug，我们给个10
my$("btn").onclick = function(){
var timeId = setInterval(function(){
opacity--;
//判断不要出现负数
if(opacity <= 0){
// 清除定时器
clearInterval(timeId);
}
my$("dv").style.opacity = opacity / 10;//因为我们前面给了一个10
},200);
}
</script>
</body>
</html>
八、定时器之setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
我们的定时器有两种:setInterval(函数,时间)----轮播图
我们的setTimeout(函数,时间)---- 只执行一次，--弹出广告，到了时间就执行一次
setTimeout(函数,时间)
参数1:函数
参数2：时间 单位是毫秒 1000毫秒等于1秒 1s
*/
window.onload = function(){
var timeId = setTimeout(function(){
alert("我只弹出一次");//就算你是弹出一次，我们要清除定时器---我们程序员约定--规范
},1000);
my$("btn").onclick = function(){
clearTimeout(timeId);//定时器清除的----这样可以节省内容
console.log("成功清除");//测试是否成功清除
}
}
// 大总结：不管是哪个定时器setInterval()和setTimeout 都要清除定时器--规范--规定。
</script>
<input type="button" value="清除定时器" id="btn">
</body>
</html>
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
