[es 6]什么是dom事件

1.什么是事件？
时间就是网页在展示过程中产生的一些用户行为和客户端行为。
用户行为：用户点击，输入，拖拽等行为
客户端行为：窗口打开关闭，数据的上传 下载，解析等行为


2.事件有哪些类型？
鼠标事件，键盘事件，表单事件，window事件，拖拽事件


3.事件结构
事件目标：事件发生在那个目标上，如点击到的button就是事件目标
事件类型/事件名：在目标上发生了什么事件，如click指点击事件
事件函数：事件发生触发时，调用的函数


4.事件的触发流程？


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


5.事件绑定的三种方式？


方式一：在标签上使用属性 on+事件名 = “函数名（）”的结构绑定事件，设置的是标签的属性
       注意：函数名后必须加（）
方式二：在js中找到事件目标，打开调用on+事件名 = 函数名/匿名函数
        注意：函数名后不能加（）


let button = document.querySelector('button');
button.onclick = myClick；或button.onclick = function() {}


方式一和方式二同时绑定同一个事件，会进行替换
方式三：在js中找到事件目标，调用API：addEventListener()函数绑定事件
注意：添加事件监听者，不会覆盖之前的绑定，会新增一个事件函数，而不是替换


添加事件监听者，第一个参数是事件名，第二个参数是事件函数
button.addEventListener('click', myClick);


第三种事件绑定是可以取消的，取消的参数和添加的参数必须一致(重点：函数的内存地址也必须要一致)才能取消，也就是说添加函数时，使用匿名函数添加的监听者无法取消监听


移除事件监听者，第一个参数是事件名，第二个参数是事件函数
button.removeEventListener('click', myClick);


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


1.在同一个事件目标上多次绑定同一个事件，前两种方式绑定会相互覆盖，只有最后一次绑定生效，第三种绑定方式不会覆盖，会给同一个事件绑定多个事件函数
2.前两种方式绑定的事件无法移除，方式三绑定的事件可以取消