day08：事件
目录
- 一、第一种解绑事件（以on开头）
- 二、第二种解绑事件
- 三、第三种解绑事件
- 四、事件冒泡
- 五、阻止事件冒泡
- 六、事件冒泡的应用（事件委托）
- 七、事件的三个阶段
总结：
1.动态创建元素案例，同时优化了一个思想，站在内存性能优化的角度去考虑问题
2.点击按钮创建表格
3.讲解元素绑定事件，三种方式：
事件源.on事件类型=事件处理函数
事件源.addEventListener("没有on的事件类型“，事件处理函数，false）
事件源.attachEvent（“有on的事件类型”，事件处理函数）
一、第一种解绑事件（以on开头）
<!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="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="publick.js"></script>
<script>
//事件源.on事件名称=事件处理函数
my$("btn1").onclick = function(){
console.log("我是绑定事件，今天大家继续给力");
}
//用什么事件绑定，就用什么事件解绑
my$("btn2").onclick = function(){
my$("btn1").onclick = null;//这个就表示解绑了(注意这个只能解绑on事件)
}
</script>
</body>
</html>
总结：
1、事件源.on事件名称 = 事件处理函数
2、事件源.on事件名称 = null
解绑之后绑定事件就不起作用了
二、第二种解绑事件
第二种绑定事件：
绑定事件：事件源.addEventListener(“没有on的事件类型”,命名函数,false)
<!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="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="publick.js"></script>
<script>
// my$("btn1").addEventListener("click",function(){
// console.log("我是第一个事件");
// },false);
// my$("btn1").addEventListener("click",function(){
// console.log("我是第二个事件");
// },false);
// // 点击第二个按钮，解绑第一个按钮的第一个点击事件
// my$("btn2").onclick = function(){
// my$("btn1").removeEventListener("click",function(){
// console.log("我是第一个事件");
// },false);
// }
// 抽离函数
// 语法公式：事件源.addEventListener("没有on的事件类型",命名函数,false)
function f1(){
console.log("我是第一个事件");
}
function f2(){
console.log("我是第二个事件");
}
my$("btn1").addEventListener("click",f1,false);
my$("btn1").addEventListener("click",f2,false);
// 点击第二个按钮把第一个按钮的第一个点击事件解绑
my$("btn2").onclick = function(){
my$("btn1").removeEventListener("click",f1,false);
}
// 总结：命名函数是可以解绑的
</script>
</body>
</html>
三、第三种解绑事件
第三种绑定事件语法：
事件源 .attachEvent(“on事件类型”,命名函数) — 绑定事件
事件源.detachEvent(“on事件类型”,命名函数) — 解绑事件
注意:我们解绑的时候 必须使用命名函数
<!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="btn1">
<input type="button" value="解绑事件" id="btn2">
<script src="publick.js"></script>
<script>
function f1(){
console.log("这是第一个事件");
}
function f2(){
console.log("这是第二个事件");
}
my$("btn1").attachEvent("onclick",f1);//ie等低版本浏览器使用的
my$("btn1").attachEvent("onclick",f2);//ie等低版本浏览器使用的
// 点击第二个按钮，把第一个按钮的第一个事件解绑
my$("btn2").onclick = function(){
my$("btn1").detachEvent("onclick",f1);
}
/*
总结：我们有三种绑定事件，就有对应的三种解绑事件---留给面试官
*/
</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>
#dv1{
width: 300px;
height: 200px;
background-color: red;
}
#dv2{
width: 250px;
height: 150px;
background-color: greenyellow;
}
#dv3{
width: 200px;
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="publick.js"></script>
<script>
/*
事件冒泡:一定有盒子嵌套盒子,如果对里面的盒子做了点击事件,外面的盒子也有和里面的盒子相同事件,那么外面的盒子也会被触发--这种就是典型的事件冒泡
满足条件两个
1、首先有盒子嵌套，盒子嵌套盒子
2、每个盒子身上都有相同的点击事件
*/
my$("dv1").onclick = function(){
console.log(this.id);
}
my$("dv2").onclick = function(){
console.log(this.id);
}
my$("dv3").onclick = function(){
console.log(this.id);
}
</script>
</body>
</html>
总结： 这个就是典型的事件冒泡—就是触发了里面的盒子的点击事件，外面的盒子也被触发了
小小面试题：
document.body.onclick = function(){
//因为事件冒泡了，所以body也被触发了
console.log("看看我的body有没有被触发");
}
//body没有高度，内容多高body就有多高
五、阻止事件冒泡
事件冒泡:一定有盒子嵌套盒子,如果对里面的盒子做了点击事件,外面的盒子也有和里面的盒子相同事件,那么外面的盒子也会被触发–这种就是典型的事件冒泡
满足两个条件：
1、首先有盒子嵌套，盒子嵌套盒子
2、每个盒子身上都有相同的点击事件
<!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>
#dv1{
width: 300px;
height: 200px;
background-color: red;
}
#dv2{
width: 250px;
height: 150px;
background-color: greenyellow;
}
#dv3{
width: 200px;
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="publick.js"></script>
<script>
//阻止事件冒泡e.stopPropagation() 和 window.event.cancelBubble = true; IE专有的
my$("dv1").onclick = function(){
console.log(this.id);
}
my$("dv2").onclick = function(e){
console.log(this.id);
e.stopPropagation();//给火狐和谷歌
window.event.cancelBubble = true; //给IE用的
}
my$("dv3").onclick = function(e){//event--事件对象 默认的可以简写为e
console.log(this.id);
//console.log(arguments.length);1 有个默认的事件对象 event ---简写 e
// console.log(e);
e.stopPropagation();//谷歌和火狐浏览器都兼容的--阻止事件冒泡
window.event.cancelBubble = true;//给IE用 专有的
}
</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>
</style>
</head>
<body>
<!--
网上搜的故事 再通俗点：就是自己的事不想干，叫它爸爸，甚至爷爷、甚至祖先来干。或者拿取快递来比喻都行
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。
事件委托----他还有个名字叫事件代理
-->
<ul id="ul">
<li>西施</li>
<li>貂蝉</li>
<li>昭君</li>
<li>凤姐</li>
<li>芙蓉姐姐</li>
</ul>
<script src="publick.js"></script>
<script>
// 事件委托--也叫做事件代理---（事件冒泡的应用）
my$("ul").onclick = function(e){//默认的事件对象event的简写e
// console.log(this);
// console.log(e.target);//e.target就是我们真正的目标
var target = e.target;
target.style.backgroundColor = "hotpink";
}
</script>
</body>
</html>
总结：核心思想：把事件委托给了ul，他的父级，然后通过e.target 找到真正的目标–这种实现过程就是我们的事件委托。
七、事件的三个阶段
<!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>
#dv1{
width: 300px;
height: 200px;
background-color: red;
}
#dv2{
width: 250px;
height: 150px;
background-color: greenyellow;
}
#dv3{
width: 200px;
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="publick.js"></script>
<script>
var objs = [my$("dv3"),my$("dv2"),my$("dv1")];
//for循环已经会了，---forEach 也是遍历循环 跟for一样
// for(var i = 0; i < objs.length; i++){
// objs[i].onclcik
// }
// forEach()语法格式
// forEach(function(ele){element ---元素 可以简写ele})
objs.forEach(function(ele){//element --- 元素 简写ele
ele.addEventListener("click",function(e){//event 简写e
console.log(this.id+ "==========="+e.eventPhase);//e.eventPhase为了检测事件三个阶段分别代表什么数字
},false);//false ---就是冒泡(就两个布尔值true和false)---true代表是捕获，false代表是冒泡
});
</script>
</body>
</html>
总结： 事件有三个阶段：要么是冒泡触发的，要么是捕获触发，冒泡和捕获不会同时触发
true代表捕获，false代表冒泡—工作里面推荐大家使用冒泡(就是false，true相对用的少)
详细讲解事件的三个阶段：这个被问的机率非常大
第一个阶段叫做事件捕获： 用数字代表就是1(如果你看到了数字1就代表的是事件捕获)–从外往里
第二阶段叫做目标阶段： 用数字代表就是2(如果你看到了数字2就代表的是目标阶段)–执行当前的点击元素
第三个阶段叫做冒泡： 用数字代表就是3(如果你看到了数字3就代表了是冒泡阶段)---- 从里到外