【金秋打卡】第16天 从函数到函数式编程之路

课程名称：破解JavaScript高级玩法
课程章节：第7章 如果不用vue，react框架，如何操作DOM？
主讲老师：Cloud

课程内容：

今天学习的内容包括：
7-7 自定义事件，满足个性化需求，增加代码灵活度——触发自定义事件的三种方法，解决特定事件。

课程收获：

内置的事件类型

• 比如点击保存按钮， 这是就是点击事件 (click)
• 某个文本失去焦点后检查输入的内容是否合法，这是 blur事件
• 鼠标滚动页，页面滚动的，这是 mousewheel事件

触发内置事件

• elment.evenType
• new [Event] + dispatchEvent

自定义事件 - 三种方式

• 如何触发下自定义（非内置）的事件呢？

1. document.createEvent：已废弃
2. new Event()
3. new CustomEvent()

自定义事件-document.createEvent

var event = document.createEvent(type)

名称	数据类型	参数说明	可选?	默认值
type	String	要创建的事件类型。事件类型可能包括"UIEvents",“MouseEvents”,“MutationEvents”,或者"HTMLEvents"	必填	无

自定义事件-new Event

event = new Event(type,eventInit)

名称	数据类型	参数说明	可选?	默认值
type	String	事件类型	必填	无
eventlnit.bubbles	Boolean	是否冒泡	可选	false
eventInit.cancelable	Boolean	能否被取消	可选	false
eventlnit.composed	Boolean	是否会在影子DOM根节点之外触发侦听器	可选	false

自定义事件-new CustomEvent

event = new Event(type,eventInit)

名称	数据类型	参数说明	可选?	默认值
type	String	事件类型	必填	无
eventlnit.detail	any	事件参数	可选	null
eventlnit.bubbles	Boolean	是否冒泡	可选	false
eventInit.cancelable	Boolean	能否被取消	可选	false

new Event 与new CustomEvent 区别

• 从继承关系来看，CustomEvent 是 Event的扩展
• 参数支持，Event适合简单的自定义事件，CustomEvent支持传递数据的自定义事件

今天 学习了 自定义事件，满足个性化需求，增加代码灵活度，触发自定义事件的方法类似vue中的emits，又增加很多知识。对自己说一句，加油😀~

坚持打卡，坚持学习！明天见💪~
​
​

​