开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第33天,点击查看活动详情
事件
1. 事件流的三个阶段
- 捕获: 从外向内
- 执行目标阶段
- 冒泡: 从内向外
2. 事件委托
- 什么是事件委托
- 将子元素的事件委托(绑定)给父元素
- 事件委托的好处
- 减少绑定的次数
- 后期新添加的元素也可以享用之前委托的事件
- 事件委托的原理
- 冒泡
- 触发事件的是谁
- 子元素
- 如何找到触发事件的对象
event.target
currentTargetVStargetcurrentTarget要求绑定事件的元素一定是触发事件的元素target绑定事件的元素不一定是触发事件的元素
3. 定义事件相关
- 分类
- 标准
DOM事件 - 自定义事件
- 标准
- 标准
DOM事件- 举例:
click,input。。。 - 事件名固定的,事件由浏览器触发
- 举例:
- 自定义事件
- 绑定事件
- 事件名
- 事件的回调
- 订阅方:
PubSub.subscribe(事件名,事件的回调)--->PubSub插件 - 订阅方是接受数据的一方
- 触发事件
- 事件名
- 提供事件参数对象, 等同于原生事件的event对象
- 发布方:
PubSub.publish(事件名,提供的数据)--->PubSub插件 - 发布方是提供数据的一方
- 绑定事件
宏任务和微任务的区别
- 在浏览器运行到js代码的时候,由于js是单进程单线程的,会先执行同步任务,在执行同步任务中可能会遇到setTimeout,setTimeout就属于宏任务,会把宏任务放到任务队列,接着执行同步任务,然后又可能遇到微任务,promise本身是同步任务,而它的
.then()是异步的,then()就属于微任务,微任务进入另外一个任务队列。 - 直到同步任务执行完以后,js回过头看有哪些微任务可以执行,微任务执行完以后再去执行放在栈顶的宏任务,依次执行下去,在宏任务中还有js代码,可能又有同步任务,依次循环执行。
- 注意:如果微任务在执行的同时又有了新的微任务需要加入进来,会把这个新的微任务执行完以后才去执行宏任务。