本文已参与「新人创作礼」活动，一起开启掘金创作之路。
事件的冒泡
- 所谓冒泡指的就是事件的向上传导
- 当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
类似于 给一个盒子绑定了鼠标点击事件，当点击了盒子后，该鼠标点击事件会一直往上触发，
如果这盒子有个父级盒子，那么父级盒子的鼠标点击事件也会触发，一直到window的鼠标点击事件上`
取消冒泡
event.cancelBuuble = true;
事件的委派
- 指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
- 因为后代没有设置点击事件，所以后代元素不会执行任何操作，祖先元素设置了祖先元素会执行对应操作
- 事件的委派是利用了冒泡，通过委派可以减少事件的绑定的次数，提高程序的性能
给ul绑定一个单击响应函数，当点击子元素时ul的点击响应函数也会触发，这就是事件的委托
ul.onclick = function(event){
// 判断当点击的时a标签时触发ul的函数
// target 这个属性可以获取触发这个事件的对象
// 给 a 标签添加blinkclass 类名用来绑定自身，不然点 ul 的哪个地方都可以触发事件
var reg = /\blink\b/;
if(reg.test(event.target.className)){
alert("sad");
}
}
事件的绑定
- 对象+事件 可以绑定一个对象绑定一个事件
- 但是后边绑定相同的事件会被覆盖掉
addEventListener( )
- 通过这个方法也可以为元素绑定响应函数
- 参数
- 1、 事件的字符串，不要on
- 2、 回调函数，当事件触发时该函数会被调用
- 3、 是否在捕获阶段触发事件，需要一个布尔值，一般传false ，默认不传就为false
btn1.addEventListener("click" , function(){ } , false);
使用addEventListener（）可以同时为一个元素的相同事件同时绑定多个响应函数
当事件触发时，响应函数会按照函数的绑定顺序执行
示例：
<div id="box1" style="width: 100px; height: 100px; background-color: #bfa;"></div>
<script>
let box1 = document.getElementById('box1')
box1.addEventListener('click',()=>{console.log('我是第一个函数点击事件');})
box1.addEventListener('click',()=>{console.log('我是第二个函数点击事件');})
</script>
注意： 但是当使用，addEventListenr（）方法绑定的函数时， 取消默认行为不能用return false
// 可以使用event来取消
// event.preventDefault();
事件委派的使用案例：
<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(){
var btn1 = document.getElementById("btn1");
var ul = document.getElementsByTagName("ul")[0];
// 添加一个a标签
btn1.onclick = function(){
var a = document.createElement("li");
a.innerHTML = "<li><a href='#' class='link'>超链接一</a></li>";
ul.appendChild(a);
}
// 给ul绑定一个单击响应函数，当点击子元素时ul的点击响应函数也会触发，这就是事件的委托
ul.onclick = function(event){
// 判断当点击的时a标签时触发ul的函数
// target 这个属性可以获取触发这个事件的对象
var reg = /\blink\b/;
if(reg.test(event.target.className)){
alert("sad");
}
}
}
</script>
</head>
<body>
<button id="btn1">添加一个超链接</button>
<ul>
<li><a href="#" class="link sd" >超链接一</a></li>
<li><a href="#" class="link" >超链接二</a></li>
<li><a href="#" class="link" >超链接三</a></li>
</ul>
</body>
点击按钮就添加一个新标签，并且利用 事件委派给新标签也绑定了鼠标点击事件
事件冒泡的使用示例：
实现一个鼠标在哪 box1 盒子就在哪的一个功能
给 window 绑定了鼠标移动事件后，当box1盒子移动到 box2 盒子中时，box2 的鼠标移动事件会触发，
并一直冒泡到 window 的鼠标移动事件上，才会让 box1 一直能跟随鼠标移动
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
body{
height: 1000px;
}
</style>
<script>
window.onload = function(){
// 获取box1
var box1 = document.getElementById("box1");
// 获取鼠标移动的坐标
window .onmousemove = function(event){
// var x = event.clientX;
// var y = event.clientY;
// 这种是相对于整个页面的偏移量，当滚动条移动时就会偏
// 可以使用pageX，pageY来获取当前页面的坐标
// document.documentElement 表示根标签
var x = event.pageX;
var y =event.pageY;
box1.style.left = x+"px";
box1.style.top = y+"px";
}
}
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2" style="width: 500px; height: 500px; background-color: #bfa; margin: 0 auto;"></div>
</body>
