【金秋打卡】第16天 從函數到函數式編程之路
標簽：
JavaScript
课程名称：破解JavaScript高级玩法
课程章节：第7章 如果不用vue，react框架，如何操作DOM？
主讲老师：Cloud
课程内容：
今天学习的内容包括：
7-7 自定义事件，满足个性化需求，增加代码灵活度——触发自定义事件的三种方法，解决特定事件。
课程收获：
内置的事件类型
- 比如点击保存按钮， 这是就是点击事件 (click)
- 某个文本失去焦点后检查输入的内容是否合法，这是 blur事件
- 鼠标滚动页，页面滚动的，这是 mousewheel事件
触发内置事件
- elment.evenType
- new [Event] + dispatchEvent
自定义事件 - 三种方式
- 如何触发下自定义（非内置）的事件呢？
- document.createEvent：已废弃
- new Event()
- 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，又增加很多知识。对自己说一句，加油😀~
坚持打卡，坚持学习！明天见💪~
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦