ネイティブJsイベントをバインドするいくつかの方法

Jsでは、イベントをバインドする一般的に使用される3つの方法があります。

1. Dom要素での直接バインディング

<button onclick = "handleClick">クリックミー</ button>

2. JSコードでのバインド

document.getElementById（ "demo"）。onclick = function（）{ 
    / *関数本体* /      
}

Three。バインディングイベントリスナー関数

イベントをバインドする別の方法は、addEventListener（）またはattachEvent（）を使用してイベントリスナー関数をバインドすることです。

elementObject.addEventListener（eventName、handle、useCapture）;

ここでのイベント名には、「on」接頭辞、イベントハンドラー関数の処理、useCapture、ブール値、キャプチャタイプを使用するかどうか、通常はfalse、バブリングしている

elementObject.attachEvent（eventName、handle）ここでのイベント名の先頭には「on」が付いています。

addEventListener（）は、イベントリスナー関数をバインドする標準メソッドであり、W3Cによってサポートされ、Chrome、FireFox、Opera、Safari、IE9.0以降でサポートされていますが、IE8.0以下はサポートされていませんこのメソッドはattachEvent（）と互換性があります。

function addEvent（obj、type、handle）{
             try {
                 // Chrome、FireFox、Opera、Safari、IE9.0 
                以降obj.addEventListener（type、handle、false ）; 
            } catch （e）{
                 try {
                     // IE8.0以下 
                    obj.attachEvent（ "on" + type、handle）; 
                } catch （e）{ 
                    obj [ "on" + type] = handle; 
                } 
            } 
        }