JSナレッジポイントのまとめ（1）

JSナレッジポイントのまとめ

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

3、スコープとスコープチェーン

• スコープは、コードブロック内の変数とリソースの可視性を決定します
• コードが環境で実行されると、変数オブジェクトのスコープチェーンが作成され、すべての変数と関数に整然とアクセスできるようになります。スコープチェーンのフロントエンドは、コードが現在実行されている環境の変数オブジェクトです。

第四に、プロトタイプチェーン

• プロトタイプチェーンは何である
  プロトタイプチェーンを継承を達成するための主な方法ですが。コンストラクターnewオブジェクトと継承を実装するために、各オブジェクトには__proto__コンストラクターを指す属性が与えられprototype、オブジェクトを構築する目的を達成するためにその変数と関数にアクセスできるようになります。サブコンストラクターは、継承prototype.__proto__をprototype実装するための親コンストラクターのプロパティを指します。
• プロトタイプチェーンの終わりがプロトタイプチェーンnull
  の長さを制限することである理由。そうしないと、クエリ中に無制限のクエリが発生します。

5、モバイル端末をタッチしてクリックすると、300msの遅延の問題が発生します

イベントトリガーシーケンス：touchstart => touchmove => touchend => touchcancel => click
ブラウザはダブルクリックするかどうかを決定するため、2回目のクリック
を300ミリ秒待ちます。解決策：fastclickライブラリを使用します。

6、DOMモデル

DOMモデルは、JSを使用してhtml要素を操作するW3Cによって提供されるインターフェースです。DOMモデルでは、各html要素はJSを介して操作できるオブジェクトです。

7つ目は、イベント委任の長所と短所です。

イベントの委任は、イベントのバブリングに基づいています。
長所：
親要素がすべての子要素のイベントを処理するため、DOM操作とメモリスペースの数が節約されます。
短所：
イベントのバブリングをサポートしないと、イベントの委任を完了できません。
バブリングがブロックされる
可能性があります。誤判定が発生する可能性があります。多くのトリガー。インシデント

バブリングイベントはサポートされていません

UI事件

• 負荷
• アンロード
• スクロール
• サイズ変更

フォーカスイベント

• フォーカス
• ぼかし

マウスイベント

• マウスリーブ
• mouseenter