- Dom节点上的事件方法
- event事件实例
- CustomEvent构造器
Dom节点上的事件方法
问题1：Dom节点元素上的事件方法是继承链是什么样的？即事件方法从何而来？
son是一个div元素，其原型链为 HTMLDIVElement -> HTMLElement -> Element -> Node -> EventTarget
发现addEventListenter，removewEventListener，dispatchEvent这几个方法是添加到EventTarget这个原型对象上的，所以只要是dom元素，都默认继承该方法
addEventListener
实践【事件名称大小写敏感】
“Click”事件点击无效
实践【处理函数可以是一个具有handleEvent方法的对象】
处理函数执行了
实践【配置对象自定义配置】
处理函数只执行了一次，Vue中的once修饰符应该就是通过配置这个属性来控制的
设置了passive为true，表示event实例不会调用preventDefault()函数来禁用阻止浏览器默认行为，但是处理函数调用了，于是报错，但是并没有阻止后续的执行
注意：
- 如果为同一个Dom元素的同一个事件多次添加同一个处理函数，那么只会执行一次，如果为同一个事件添加多个不同的处理函数，多个处理函数会一次执行 【实践】
只执行了一次
执行了两次，{}对象的形式被被看成是两个处理函数
- 传参，如果需要传入某个参数，给处理函数的话，可以直接在最开始的处理函数调用真正的处理函数，传入参数
- 处理函数中的this对象，指向那个dom元素
指向son元素对象
removeEventListener
【实践】
移除失败
移除成功了！！！【所以第三个参数无所谓】
dispatchEvent
【实践-返回值】
result -> true
result => true
虽然在处理函数中调用了preventDefault()函数，但是还是返回了true!!!
event实例
实例属性
- bubbles: 表示当前事件是否会冒泡，通过Event构造函数生成的实例属性，默认是不会冒泡的
- cancelBubble： 是否取消冒泡，相当于执行Event.stopPropagation(),可以阻止事件的传播
- cancelable: 表示事件是否可以取消，只读，大多数浏览器原生事件是可以取消的，除非显式声明，通过Event构造函数生成的事件，默认是不可以取消的
- composed
- currentTarget 返回事件当前所在的节点，即正在执行监听函数所绑定的那个节点
- defaultPrevented: 表示该事件是否调用过Event.preventDefault(),只读
- evetPhase 表示事件目前所处的阶段，只读
0:事件目前没有发生
1: 事件目前处于捕获阶段，即处于从祖先节点向目标节点传播的过程
2:事件到达目标阶段，Event,target指向的节点
3:事件处于冒泡阶段，即从目标节点向祖先阶段反向传播的过程
-
isTrusted 表示事件是否由真实的用户行为产生，true表示用户通过ui操作，false表示js模拟触发事件
-
path 表示捕获的路径
-
returnValue 是否有返回值
-
srcElement 触发的事件的源元素
-
target 事件的目标节点，和srcElement一样
-
timeStamp 事件触发的事件
-
type 事件的类型，字符串
-
detail 只有浏览器的UI(用户界面)事件才具有，返回一个数值，表示事件的某种信息
event方法
问题1：event事件失实例的方法是从谁那继承过来的，具体的继承链是什么样得？
点击事件实例event -> MouseEvent - UIEvent -> Event（方法是从Event原型对象上继承过来的）
**preventDefault(): **
取消浏览器对当前事件的默认行为，前提是事件的cancelable属性值为true 注意：该方法仅仅是取消事件对当前元素的默认影响，不会阻止事件的传播
stopPropagation():
阻止事件的传播。防止再次触发定义在别的节点上的监听函数，但是不包括在当前节点上的事件监听函数
注意：如果是一个节点对于同一个事件添加了多个监听函数，多个监听函数还是会依次执行
【实践】
输出了“hi”
stopImmediatePropagation()
阻止事件从传播，注意：如果是一个节点对同一个事件有多个监听函数，当其中一个监听函数调用了这个方法，剩下的监听函数就不会执行
【实践】
什么都没有输出
Event.composedPath()
返回一个数组，成员是事件的最底层节点和依次冒泡经过的所有上层节点
【实践】
CustomEvent()构造函数
CustomEvent作为window对象上的不可枚举的属性，用于生成自定义的事件实例
