前端基础知识---7事件

7.1CSS操作

7.2事件处理程序

7.2.1DOM事件（一次点击只发生一个事件）

btn.onclick = function(){

        console.log("点击了")

    }

7.2.2DOM2事件（一次点击发生多个事件）

 btn.addEventListener("click",function(){

        console.log("点击了按钮1")

    })

    btn.addEventListener("click",function(){

        console.log("点击了按钮2")

    })

7.3鼠标事件

id名称一定要对上！！！

7.4Event事件

event事件对象就是一个参数        function（e）{}

7.4.1event对象属性

target：返回原样

btn.onclick = function(e){

            console.log(event.target)

        }

type：返回事件类型

        btn.onclick = function(e){

            console.log(event.type)

        }

7.4.2event对象方法

preventDefalut：阻止默认程序（a标签、表单）

kimi.onclick = function(e){

            e.preventDefault();

            console.log("点击了Kimi")

        }

stopPropagation:子级元素程序运行时阻止父级元素程序的运行

box.onclick = function(e){

            console.log("第一个")

        }

        box1.onclick = function(e){

            e.stopPropagation();

            console.log("第二个")

        }

7.5键盘事件

7.5.1键盘事件

keydown        按下键盘时触发

 username.onkeydown=function (e)

    {

        console.log(e.target.value)                //获取输入的值

        console.log("按下了")    

    }

keypress        按下有值的键时触发

keyup        松开键盘时触发

7.5.2keyCode唯一标识

keyCode代表每个按键的唯一标识

 username.onkeyup = function(e){

        console.log(e.keyCode)                // 回车是13

    }

7.6表单事件

7.6.1input事件                实时输入，实时获取

7.6.2select事件

7.6.3change事件                修改完后再获取（失去焦点，回车）

7.6.4reset事件

<form action="" id="myForm">

        <input type="text" name="username" id="">

        <button id="rest">重置</button>

    </form>

    <input type="text" name="用户名" id="username">

</body>

<script>

    var username = document.getElementById("username")

 var resetBtn = document.getElementById("reset")

    resetBtn.onclick = function(){

        myForm.reset()

    }

</script>

7.6.5submit事件

 <form action="" id="myForm" onsubmit="handleSubmit">

        <input type="text" name="username" id="">

提交之后上传到服务器

7.7事件代理

点击子元素可以触发父元素（避免给多个标签添加事件）

7.8定时器

7.8.1setTimeout（function（），毫秒数）        延时执行

clearTimeout        清除定时器 

setTimeout(function(){

        console.log("大家好！")

    },2000)

注意：setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象

7.8.2setInterval        间隔打印

clearInterval        取消定时器

7.9防抖

在某个时间期限内事件处理函数只执行一次（提高效率）

 //闭包

    function debounce(fn,delay){

        var timer = null;

        return function(){

            if(timer){

                clearTimeout(timer)

            }

            timer = setTimeout(fn,delay)

        }

    }

    //滚动事件

    window.onscroll = debounce(scrollHandle,200)

    function scrollHandle(){

        var scrollTop = document.documentElement.scrollTop;

        console.log(scrollTop);

    }

7.10节流

<script>

//闭包   

function throttle(fn,delay){

        var valid = true;

        return function(){

            if(!valid){

                return false;

            }

            valid = false;      

            setTimeout(function(){

            fn()

            valid = true;

        },delay)

    }

}

//滚动页面

    window.onscroll = throttle(scrollHandle,2000)

    function scrollHandle(){

        var scrollTop = document.documentElement.scrollTop;

        console.log(scrollTop);

    }

</script>