【金秋打卡】第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 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦