DOMの中で重要な知識点:事件について話します.

4779 ワード

javascript

イベント
イベントとは、ブラウザがJavaScriptプログラムを通知し、ユーザーがHTMLページのボタンをクリックしたり、ユーザーがユーザ名やパスワードを入力したりすることをイベントといいます.
イベントの種類
イベントは使用シーンによって次のように分類されます.

は、デバイスの入力イベントに依存しています.キーボードイベントとマウスイベント、これらのイベントは、デバイスに直接関連する

です.

は、デバイスの入力イベント、例えば、clickイベントなどと独立しています.これらのイベントは、直接にデバイスに関連するものではありません.

ユーザインタフェースの関連イベント:ユーザーインターフェースイベントがより上位のイベントで、フォーム内のコンポーネント

に一般的に多く使われている.

状態変化に関するイベント:これらのイベントは、ユーザの行為に関係なく、ネットワークまたはブラウザがトリガする

である.

特定のAPIイベント:これらのイベントは、HTML 5において提供されるAPI内のイベントのドラッグ＆ドロップなど、特定のシーンの実装に多く使われる.

エラー処理に関するイベント

イベント登録
イベントの登録とは、JavaScript関数を指定されたイベントに関連付けることで、バインディングされた関数がイベントのハンドルとなり、イベントがトリガされると、バインディングされた関数が登録イベントを呼び出して以下の3つの方法で実現されます.

HTMLページ要素が提供するイベント属性

DOM標準仕様でHTML関連オブジェクトが提供するイベント属性

HTMLページに要素を指定することにより、イベントモニター

を追加する.
バインディングイベント

HTMLページとJavaScriptを結合して実現されたイベントバインディングは、HTMとJavaScriptの分離を実現していないという欠点があります.
HTMLコード:

JavaScriptコード:

var btn=document.getElementById('btn');
function myClick(){
    console.log('this is event');
}

JavaScriptバインディングイベント

HTMLコード

JavaScriptコード

var btn=document.getElementById('btn');
btn.onclick=function(){
    console.log('this is event');
}

用addEventListener

パラメータ:eventName:バインディングされたイベント名を表します.オンカロックがないことに注意してください.イベントを表す処理関数(コールバック関数)は同じ要素に対して同じイベントを複数回結びつけることができます.

JavaScriptコード

var btn=document.getElementsByClassName('btn')[0];
btn.addEventListener('click',function(){
    console.log('this is event');
});

イベントモニターにおけるthisについて:addEventListener()を使用して、あるHTMLページ要素にイベントを登録する場合、thisは登録イベントの要素を指す.メソッドがあるHTMLページ要素にイベントを登録するとき、windowオブジェクトを指す.登録イベントの要素ではなく、addEventListener(メソッドとEvent)によるEventh方法の中のthisの意味は違っています.モニターのブラウザの互換性を最適化する必要があります.

//  IE 8     this  
function bind(elem,event,callback){
    //       addEventListener
    if(elem.addEventListener){
        elem.addEventListener(event,callback,false);
    }else{
        elem.attachEvent('on'+event,function(){
            // this             
            callback.call(elem);
        });
    }
}

登録イベントおよびイベントオブジェクトEventの削除の使い方
removeveeventListenerメソッドパラメータ:eventName:削除されたイベント名functionNameを表します.イベントの処理関数は登録イベントの処理関数でなければならないということです.
HTMLコード

JavaScriptコード

var btn=document.getElementById('d1');
function myClick(){
    console.log('this is event');
}
btn.addEventListener('click',myClick);
//  .removeEventListener(    ,    );
btn.removeEventListener('click',myClick);

/*IE 8          removeEventListener()  
detachEvent(eventName,functionName)
eventName:         (   on)
functionName:         
            (     )*/

登録イベントを削除
イベントオブジェクトは、Windowsオブジェクトの属性としてイベントオブジェクトが発生します.イベントの処理関数では、パラメータEventイベントオブジェクトを受信します.すべてのイベントの対象となる親レベル1.MouseEventイベントオブジェクト:マウスイベント2.KeyboardEventイベントオブジェクトを表します.キーボードイベント3.TouchEventイベントオブジェクトを表します.タッチイベントを表します.
IE 8以下のバージョンのブラウザで提供されるイベントモニターの追加方法:イベントオブジェクトはwindowオブジェクトの属性として出現する:window.event
htmlコード

JavaScriptコード

var btn=document.getElementById('btn');
//     ：  .addEventListener(   ,function(    Event){});
btn.addEventListener('click',function(event){
    //      
    var btn=event.target;
    //      
    event.preventDefault();
})

//     ：   .onclick=function(    Event)
btn.onclick=function(event){
//  IE 8                  
     var e=event || window.event;
     //IE 8         
     e.returnValue=false;
}

マウスの座標値を取得
以下は取得のみで設定できません.

pageX、pageY:現在のHTMLページ

に対するマウス座標値

clientX、clientY:マウス座標値は現在の視認ウィンドウ

に対して

screenX,screenY:現在のスクリーンに対するマウス座標値

CSSコード

//         ，   body     2000  
body{height:2000px}

JavaScriptコード

var html=document.documentElement;
html.addEventListener('click',function(event){
    //          HTML  
    console.log(event.pageX,event.pageY);
    //              
    console.log(event.clientX,event.clientY);
    //             
    console.log(event.screenX,event.screenY);
});

マウスイベント
clickイベント:マウスクリックイベント(マウス左ボタン)mousedownイベントを表します.マウスボタンが押されたことを示すイベントmouseupイベント:マウスボタンが解放されたことを示すイベントイベントイベントイベントオブジェクトは、マウスボタンの値を表します.0-マウスの左ボタンを表します.

1 -       
2 -

キーボードイベント
keydownイベント:キーボードボタンが押されたことを示すイベント:キーボードボタンが解除されたことを示すイベント:キーボードボタンを押してください.
イベントオブジェクトコード:現在のキーの名前を取得するkey:現在のキーの名前を取得するkeyCode:現在のキーに対応するUnicodeコードを取得する

コンストラクタ内の方法とコンストラクタprototype属性上の方法の比較