JS知识点总结
JS知识点总结
一、DOM中中target和currentTarget的区别
target
指触发事件的元素,到哪并一定是绑定该事件的元素。
currentTarget
指绑定事件的元素。
同时,在事件处理函数中this
始终指向事件绑定的元素,即e.currentTarget
。
二、实现发布订阅模式
通过一个对象来保存预定的函数(订阅),等待时机到了就触发(发布)。
class EventEmitter {
constructor() {
this.events = {};
}
// 订阅
// 就是给某个事件添加方法
on(eventName, handler) {
if (!this.events[eventName]) {
this.events[eventName] = [handler];
} else {
this.events[eventName].push(handler);
}
}
// 发布
// 就是触发已订阅的方法
emit(eventName) {
this.events[eventName] && this.events[eventName].forEach(fn => fn());
}
// 移除订阅事件
removeEmitter(eventName, callback) {
if (this.events[eventName]) {
this.events[eventName] = this.events[eventName].filter(fn => fn !== callback);
}
}
// 只执行一次订阅的事件,然后移除
once(eventName, handler) {
const fn = () => {
handler();
this.removeEmitter(eventName, fn);
}
this.on(eventName, fn);
}
}
三、作用域和作用域链
- 作用域决定了代码块中变量和资源的可见性
- 上下文中的代码在执行的时候,会创建变量对象的一个作用域链(
scope chain
)。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。代码正在执行的上下文的变量对象始终位于作用域链的最前端。如果上下文是函数,则其活动对象(activation object
)用作变量对象。活动对象最初只有一个定义变量:arguments
。(全局上下文中没有这个变量。)作用域链中的下一个变量对象来自包含上下文,再下一个对象来自再下一个包含上下文。以此类推直至全局上下文;全局上下文的变量对象始终是作用域链的最后一个变量对象。
四、原型链
- 什么是原型链
原型链是实现继承的主要方法。为了实现构造函数new
对象和继承,给每个对象都赋予一个__proto__
属性指向构造函数的prototype
属性,这样就能访问其变量和函数,达到构造对象的目的。子构造函数的prototype.__proto__
指向父构造函数prototype
属性,实现继承。 - 原型链终点为什么是
null
是为了保证原型链的长度是有限的,否则在查询的时候会无限制的查询下去。
五、移动端touch和click,以及300ms延迟的问题
事件触发顺序:touchstart => touchmove => touchend => touchcancel => click
由于浏览器会判断是否双击,因此会等待300ms是否有第二次点击
解决办法:使用fastclick库。
六、DOM模型
DOM模型是W3C提供的使用JS操作html元素的接口,在DOM模型中每一个html元素都是一个对象可通过JS进行操作。
七、事件委托的优缺点
事件委托是基于事件冒泡的。
优点:
父元素处理所有子元素的事件,节省了操作DOM的次数和内存空间
缺点:
不支持事件冒泡的无法完成事件委托
在冒泡过程中可能被阻止冒泡
有可能发生误判,触发多次事件
不支持冒泡的事件
UI事件
- load
- unload
- scroll
- resize
焦点事件
- focus
- blur
鼠标事件
- mouseleave
- mouseenter