事件传播机制：当元素嵌套且绑定相同类型事件时，会自动触发其父辈绑定的事件
阻止事件传播
//阻止事件传播
var box = document.querySelector(".box")
box.onclick=function(e){}
e.stopPropagation()监听事件
//添加事件监听器
//box.addEventListener(事件类型,事件函数,事件传播阶段)
var child = document.querySelector(".child") //孩子
var parent = document.querySelector(".parent") //父亲
var grandpa = document.querySelector(".grandpa") //爷爷
child.addEventListener("onclick",function(){},false) //默认false，为冒泡阶段；true，为捕获阶段
//加上之后则执行到child就不会自动执行父亲和爷爷的点击事件周期定时器和延迟定时器
setInterval(function,time)：周期定时器 function指执行函数，time指时间间隔，单位是毫秒
clearInterval(定时器标志变量) ：定时器停止
setTimeout(function,time)：延迟定时器 function指执行函数，time指时间间隔，单位是毫秒
clearTimeout(定时器标志变量) ：定时器停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aa{
width: 130px;
height: 130px;
background: linear-gradient(0deg, red, yellow, blue);
}
</style>
</head>
<body>
<div id="aa"></div>
<!-- <input type="range" id="change" min="0" value="50" max="360"> -->
<input type="button" value="停止" id="stop">
<input type="button" value="开启" id="start">
<script>
// setInterval(function,time)：周期定时器 function指执行函数，time指时间间隔，单位是毫秒
// setTimeout(function,time)：延迟定时器 function指执行函数，time指时间间隔，单位是毫秒
// var c_btn = document.getElementById("change")
var c_div = document.getElementById("aa")
var stop = document.getElementById("stop")
var start = document.getElementById("start")
// c_btn.oninput=function(){
// var current_value = this.value
// c_div.style.background="linear-gradient("+current_value+"deg, pink, yellow, blue)"
// }
var current_value = 0
var once = 1
var demo = function(){
c_div.style.background="linear-gradient("+(current_value++)+"deg, red, yellow, blue)"
test = setTimeout(demo,100)
}
// var test = setInterval(demo,100)
var test = setTimeout(demo,100)
stop.onclick=function(){
// clearInterval(test)
clearTimeout(test)
once = 0
}
start.onclick=function(){
if(once==1){
return
}
// test = setInterval(demo,100)
test = setTimeout(demo,100)
once=1
}
</script>
</body>
</html>
![释放搜索潜力：基于ES(ElasticSearch)打造高效的语义搜索系统，让信息尽在掌握[2.项目讲解篇],支持Linux/Windows部署安装](https://img-blog.csdnimg.cn/63a67cd7f8504a1d8411cc2f4a233385.png#pic_center)
