DOM事件简介

1. 什么是事件?

事件就是网页在展示过程中产生的一些用户行为和客户端行为

用户行为: 用户点击,输入,拖拽等行为

客户端行为: 窗口打开,关闭,数据上传下载,解析等行为

2.事件有哪些类型?

鼠标事件, 键盘事件, 表单事件, window事件, 拖拽事件

3, 事件结构?

事件目标: 事件发生在那个目标上, 如点击的button就是事件目标

事件类型/事件名: 在目标上发生了什么事件, 如click指点击事件

事件函数: 事件发生/触发时, 调用的函数 如: myCick

4, 事件的触发流程?

客户端或用户产生了固定的行为--->系统检测到行为的产生--->系统判断这个行为有没有默认操作(如a标签的跳转)--->如果有默认操作,就立即执行默认操作--->如果没有默认操作,就去js中找对应的事件函数, 能找到就立即调用, 找不到就报错

 

5, 事件绑定的三种方式?

        方式一: 在标签上使用属性  on+事件名="函数名()" 的结构绑定事件,

            注意: 函数名后必须加()

        方式二: 在js中找到事件目标, 打点调用on+事件名=函数名/匿名函数

            注意: 函数名后不能加()

        方式三: 在js中找到事件目标, 调用addEventListener()函数绑定事件

            注意: addEventListener是新增事件函数而不是替换

 

<button onclick="myClick()" >点我</button>
<a href="http://www.baidu.com" onclick="aClick()">baidu </a>
 <script>
        function aClick(){
            console.log("点击了a")
        }
        function myClick(){
            console.log("点击了button1")
        }
       
        var button = document.querySelector("button")
        button.onclick = myClick;  //   点击了button1
        button.onclick = function(){
            console.log("点击button2")  //覆盖了上边的点击事件  点击button2
        }

        // 添加事件监听者, 第一个参数是事件名,第二个参数是事件函数

        button.addEventListener("click", myClick)  //事件监听不会覆盖上边的点击事件，而是新增了一个点击事件       点击button2  点击了button1


        button.addEventListener("click", function(){
            console.log("点击了button3")
        })    // 点击button2  点击了button1  点击了button3


        // 第三种事件绑定是可以取消的, 
        button.removeEventListener("click", myClick)
        //  点击button2   点击了button3

        // 注意: 取消的参数和添加的参数必须一致才能取消, 
        // 函数内存地址也必须一致, 也就是说, 使用匿名函数添加的监听者无法取消监听

        button.removeEventListener("click", function(){
            console.log("点击了button3")
        })   //  点击button2   点击了button3

        // 总结: 三种绑定事件方式的区别

        // (1) 在同一个事件目标上多次绑定同一个事件, 前两种方式绑定会相互覆盖,只有最后一次绑定生效, 第三种绑定方式不会覆盖, 会给同一个事件绑定多个事件函数

        // (2) 前两种方式绑定的事件无法取消, 方式三绑定的事件可以取消


    
    </script>