先端イベントバインド知識点(面接常考)

概要
事件はJavaScriptによって検出できる行為です.
ウェブページの各要素は、JavaScript関数またはプログラムをトリガするイベントをいくつか生成することができます.
イベントは通常関数と組み合わせて使用され、イベントが発生した時に関数が実行されます.
JSイベントを実行する方式:

HTMLイベント属性は、JavaScriptコード

を直接実行することができます.

HTMLイベント属性は、JavaScript関数

を呼び出すことができます.

HTML要素のために自分のイベントハンドラを指定してもいいです.

事件の発生を阻止することができます.

等…

よく使われるJS事件
タイプ
マウスクリックイベント
onclick
マウスを使ったイベント
onmouseover
マウス移動イベント
onmousout
イベントをフォーカス
onfocus
焦点外事件
onblur
イベントを読み込み
onload
ページを更新
onunload(IEだけに有効らしい)
ページを閉じる
onbeforeunload(IEのみ有効らしい)
事件の流れ
イベントフローは、ページからイベントを受け取る順序を説明する.

IEのイベントフローは、イベントバーストストリームであり、イベントはサブ要素によって取得され、DOMツリーに沿ってアップロードされる.すなわち、イベントの最初は、最も具体的な要素(ドキュメント内のネストレベルの最も深いノード)によって受信され、その後、段階的に、最も特定されていないノード(Dcument)に上から中継され、stopPropagation()方法で発泡を終了する.

Netscapeのイベントフローはイベントトラッピングストリームであり、イベントはルート要素によって取得され、DOMツリーに沿って下向きに配信される.イベントバーストとは対照的に、イベントキャプチャの考えは、あまり具体的ではないノード(document)は、イベントをより早く受信するべきであり、最も具体的なノードは、最後にイベントを受信する.もう適用されません.

.
イベントオブジェクト
HTML DOM Eventオブジェクト
header 1
header 2
イベント
イベント
イベントターゲット
event.target
イベントを追加
element.addEvent Listener(type、listener、false)
イベントを削除
element.removeveEvent Listener(type、listener、false)
事件の泡を防ぐ
event.stopPropagation()
デフォルトの挙動をキャンセル
event.prevent Default()
IE中のイベントオブジェクト
header 1
header 2
イベント
window.イベント
イベントターゲット
event.srcele ment
イベントを追加
element.at tachEvent(‘on’＋type,listener)
イベントを削除
element.detachEvent(‘on’＋type,listener)
事件の泡を防ぐ
event.ccel Bbble=true
デフォルトの挙動をキャンセル
event.return Value=false
イベントハンドラ
HTMLイベントハンドラ
事件はずっとhtmlの要素の中で書いて、欠点:htmlとjsコードは緊密に結合しています.

<a href="" onclick="alert('msg');">  a>

0レベルDOMイベントハンドラ
一つの関数をイベントの処理プログラムの属性に割り当てます.利点:比較的簡単で、ブラウザを越えてサポートします.短所:複数のイベントハンドラを追加できません.最後のイベントは前のイベントをカバーします.

document.getElementById('id').onclick = function () {
    alert(1);
}

2級DOMイベントハンドラ
イベントをaddeventlistener()で追加することにより、removeEventlistener()でこのイベントを削除することができます.これらは3つのパラメータを受信します.処理するイベント名イベント、イベントハンドラの関数として機能するfunction、およびブール値useCapture.ブールパラメータは、近代的なブラウザの最近のいくつかのバージョンだけではプラスできません.Trueはイベントをキャプチャ段階で実行し、falseは発泡段階で実行することを表します.

target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

IEイベントハンドラ
IE 8およびより早いIEバージョンは、addEvent Listener()方法をサポートしておらず、Opera 7.0およびOperaのより早いバージョンもサポートされていない.しかし、これらの関数がサポートされていないブラウザについては、イベントのハンドルを追加するためにattachEvent()方法を使用することができる.イベントをattachEvent()で追加することにより、detachEvent()でこのイベントを削除することができます.この2つの方法は、同じ2つのパラメータを受信します.イベントハンドラの名前typeとイベントハンドラの関数functionは、3番目のパラメータをサポートしていない理由:IE 8–発泡ストリームのみをサポートします.

element.attachEvent(type, function)
element.detachEvent(type, function)

イベントエージェントと依頼
多くの要素にイベントを追加する必要がある場合、それらの親ノードにイベントを追加することにより、親ノードにイベントを依頼して処理関数をトリガすることができる.これは主にブラウザのイベント泡発生メカニズムによるものです.

<div id="box">
    <p>Lorem ipsum dolor sit amet.p>
    <p>Lorem ipsum dolor sit amet.p>
    <p>Lorem ipsum dolor sit amet.p>
div>

<script>
    let box = document.getElementById('box');
    box.addEventListener('click', function (e) {
        //      e.targe   P
        if (e.target.nodeName === 'P') {
            //           
            alert('p');
        }
    })
script>

ブラウザをまたぐ対応イベントハンドラ(能力検出)

/*
 * @Author: bxm09
 * @Date:   2017-03-24 15:51:37
 * @Last Modified by:   bxm09
 * @Last Modified time: 2017-07-24 13:16:04
 * @Desc              （    ）
 */

var eventshiv = {
    // event  
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type  
    getType: function(event) {
        return event.type;
    },

    // target  
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    /**
     *       
     * 2  DOM -> IE -> 0  DOM
     */
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            //      . 'on'       ，    []
            elem['on' + type] = listener;
        }
    },

    //       
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null;
        }
    },

    /**
     *       
     */
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this    e.target
            }
        });
    },

    /**
     *       
     *  IE -> IE
     */
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    /**
     *       
     *  IE -> IE
     */
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

console.log('eventshiv.js       ！');