文章目录
关于 自定义JS工具类 相关类似的源码请看 https://gitee.com/ykang2020/my_utils
1. 封装DOM事件监听addEventListener
1.1 复习DOM事件流
基础知识可以参考这篇博文
【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件
简单复习一下DOM事件流
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
JS代码中只能执行捕获或者冒泡其中的一个阶段
addEventListener(type, listener[, useCapture])
中的第三个参数
如果是 true
,表示在事件捕获阶段调用事件处理程序;
如果是 false
(默认值),表示在事件冒泡阶段调用事件处理程序。
let innerBox = document.getElementById('inner')
let outterBox = document.getElementById('outter')
outterBox.addEventListener('click', function () {
console.log('捕获 outter')
},true)
innerBox.addEventListener('click', function () {
console.log('捕获 inner')
},true)
outterBox.addEventListener('click', function () {
console.log('冒泡 outter')
})
innerBox.addEventListener('click', function () {
console.log('冒泡 inner')
})
点击蓝色盒子产生的效果
1.2 事件冒泡
事件在目标元素上处理后, 会由内向外(上)逐层传递
事件冒泡的应用场景: 事件代理/委托/委派
1.3 事件委托
没有将事件绑定在目标元素身上,而是
将多个子元素的同类事件监听委托给(绑定在)共同的一个父组件上
这样做的好处:
- 减少内存占用(事件监听回调从n变为1)
- 动态添加的内部元素也能响应
1.4 自定义DOM事件监听
/**
* 自定义事件监听
* @param {String} el 父元素选择器
* @param {String} type 事件类型
* @param {Function} fn 回调函数
* @param {String} selector 子元素选择器
*/
export default function myAddEventListener(el, type, fn, selector) {
// 判断el的类型,获取元素
if (typeof el === "string") {
el = document.querySelector(el);
}
// 事件判定
// 若没有传第四个参数(子元素选择器),则给el元素绑定事件
if (!selector) {
el.addEventListener(type, fn);
} else {
el.addEventListener(type, function(e) {
// 获取点击的目标事件源
const target = e.target;
// 判断选择器与目标元素是否相符
if (target.matches(selector)) {
// 相符就执行回调,否则就什么都不做
fn.call(target,e)