Summary of JS knowledge points (1)

Summary of JS knowledge points

1. The difference between target and currentTarget in DOM

targetRefers to the element that triggers the event, and where it is, it must be the element that binds the event.
currentTargetRefers to the element bound to the event.
At the same time, the event-handling function thisalways points to the element bound to the event, ie e.currentTarget.

Second, realize the publish and subscribe model

Save the predetermined function (subscription) through an object, and wait for the time to trigger (publish).

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);
    }
}

Three, scope and scope chain

• Scope determines the visibility of variables and resources in the code block
• When the code runs in an environment, a scope chain of variable objects is created to ensure orderly access to all variables and functions. The front end of the scope chain is the variable object of the environment in which the code is currently executed.

Fourth, the prototype chain

• What is the prototype chain The
  prototype chain is the main method to achieve inheritance. In order to implement the constructor newobject and inheritance, each object is given an __proto__attribute that points to the constructor prototype, so that its variables and functions can be accessed to achieve the purpose of constructing the object. The sub-constructor prototype.__proto__points to the prototypeproperties of the parent constructor to implement inheritance.
• Why the end of the prototype chain null
  is to ensure that the length of the prototype chain is limited, otherwise there will be unlimited queries during the query.

Five, touch and click on the mobile terminal, and the problem of 300ms delay

Event trigger sequence: touchstart => touchmove => touchend => touchcancel => click
Since the browser will determine whether to double-click, it will wait 300ms for a second click.
Solution: Use fastclick library.

Six, DOM model

The DOM model is an interface provided by W3C that uses JS to manipulate html elements. In the DOM model, each html element is an object that can be manipulated through JS.

Seven, the advantages and disadvantages of event delegation

Event delegation is based on event bubbling.
Advantages: The
parent element handles the events of all child elements, saving the number of times to manipulate the DOM and memory space.
Disadvantages:
Event delegation cannot be completed without supporting event bubbling. The
bubbling may be blocked during the bubbling process. Misjudgments
may occur and many triggers. Incident

Bubbling events are not supported

UI incident

• load
• unload
• scroll
• resize

Focus event

• focus
• blur

Mouse event

• mouseleave
• mouseenter