html之事件传播机制和定时器

事件传播机制：当元素嵌套且绑定相同类型事件时，会自动触发其父辈绑定的事件

阻止事件传播

html 复制代码

//阻止事件传播
var box = document.querySelector(".box")  
box.onclick=function(e){}
e.stopPropagation()

监听事件

html 复制代码

//添加事件监听器
//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(定时器标志变量) ：定时器停止

html 复制代码

<!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>