結合方法イベント

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
    <スタイル> 
        ■は{ 
            幅：100ピクセル、高さ100ピクセル。
            背景：赤
        }
     </スタイル> 
</ HEAD> 
<BODY> 
    <DIV CLASS = "ボックス"> </ div> 
</ body> 
<スクリプト> VAR obox = document.querySelector（ "ボックス" ）。
    

    1 ）
     } 
     obox.onclick = 関数（）{ 
         にconsole.log（ 2 ）
 //      } 
    // 結合割当型イベントを削除 
     obox.onclick = NULL ;
     // 共通の、あるなし互換性、単純


    // リスニングバインディング（DOM2結合レベルのイベント） 
     obox.addEventListener（ "クリック" 、もう一度Fn1）
      関数もう一度Fn1（）{ 
         にconsole.log（ 1）// 1 
     } 
     obox.addEventListener（ "クリック"、関数（）{ 
         にconsole.log（ 2）   // 2 
     }）
     //、元のイベントハンドラによってイベントハンドラを見つける除去 
     obox.removeEventListener（ "クリック"、もう一度Fn1）// 2 

    // 互換性のIE 
     obox.attachEvent（ "onclickの" 、もう一度Fn1）
      関数もう一度Fn1（）{ 
         にconsole.logを（ 1 ）
     } 
     obox.attachEvent（ "onclickの"、関数（）{ 
         にconsole.log（ 2 ）
     }）
     obox.detachEvent（ "onclickの" 、もう一度Fn1）

     にconsole.log（obox.attachEvent）


ラッパー関数
関数removeEvent（ELE、タイプ、CB）{
         IF （ele.removeEventListener）{
            ele.removeEventListener（タイプ、CB）
        } そう もし（ele.detachEvent）{ 
            ele.detachEvent（ + "オン" タイプ、CB）
        } 他{ 
            ELE [ +型の"オン"] = NULL ; 
        } 
    } 

    関数addEvent（ELE、タイプ、CB）{
         場合（ele.addEventListener）{ 
            ele.addEventListener（タイプ、CB）
        } そう であれば（ele.attachEvent）{ 
            ele.attachEvent（ + "オン" タイプ、CB）
        } さもなければ{ 
            ELE [ +型の"オン"] =CB; 
        } 
    }

调用函数 
     addEvent（obox、 "クリック" 、FN1）
     関数FN1（）{ 
         にconsole.log（1）// 1  }  addEvent（obox、 "クリック" 、FN2） 関数FN2（）{にconsole.log（2）// 2 }

　　　removeEvent（obox、 "クリック"、FN1）
　　　removeEvent（obox、 "クリック"、FN2）

</スクリプト> </ HTML>

デモ

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
    <スタイル> 
        ■は{ 
            幅：100ピクセル、高さ100ピクセル。
            背景：赤; 
            位置：絶対;左： 0;上部：0 。
        }
     </スタイル> 
</ HEAD> 
<BODY> 
    <DIV CLASS = "ボックス"> </ div> 
</ body> 
<スクリプト> VaRの obox = document.querySelector（ "ボックス。" ）;
    VAR clientW =
    document.documentElement.clientWidth;
     VAR clientH = document.documentElement.clientHeight;
     VAR W = obox.offsetWidth;
     VAR H = obox.offsetHeight; 

    // アクションのコース：その後、押圧移動、及び後持ち上げ 
    obox.addEventListener（ "マウスダウン"を、関数（イブ）{
         // ダウン、押圧本体のイベントオブジェクト座標取得
        VAR E1 =イブ|| window.eventを;
         // マウスの過度の動きがある瞬間の要素を残し防止するために、移動事象をプラスページに 
        document.addEventListener（「mouseMoveイベント」、移動）
         // 持ち上げたときに、イベントを移動するので、その事前に指定され、削除された
        機能の移動（イブ）{
             VARの E =イブ||window.event;
             // trueから移動する要素計算：マウスは減算押圧ページに対する相対座標が要素の座標に対しての
            VARの L = e.pageX - e1.offsetXと、
             VAR T = e.pageY - e1.offsetY;
             // 境界画定
            IF（T <0 ）{ 
                T = 0 
            } 
            IF（L <0 ）{ 
                L = 0 
            } 
            IF（L> clientW - W）{ 
                L = clientW - W; 
            } 
            IF（T> clientH - H）{ 
                T = clientH - H。
            } 

            // 設定された位置 
            obox.style.left = L + "PX" 
            obox.style.top = T + "PX" 
        } 
        // 、持ち上げ削除する移動、リフト除去さ 
        document.addEventListener（ "のmouseUp" アップ）
         機能アップ（）{ 
            document.removeEventListener（ "mouseMoveイベント" 、移動）
            document.removeEventListener（ "のmouseUp" アップ）
        } 
    }）

 </ SCRIPT> 
</ HTML>

おすすめ