web-dev-qa-db-ja.com

プレーンJavaScriptでクリックイベントをどのようにキャッチしますか？

JQueryを使用する場合、HTML要素のクリックイベントをキャッチするために$('element').click();を実行できることを知っていますが、プレーンJavascriptを使用してそれをどのように行うのですか？

javascripthtmlonclick
22
chromedude
document.getElementById('element').onclick = function(e){
  alert('click');
}

デモ： http://jsfiddle.net/e9jZW/1/

40
Rocket Hazmat

イベントリスナー を追加するか、要素の onclickハンドラー を設定します。

var el = document.getElementById("myelement");

el.addEventListener('click', function() {
  alert("Clicked");
});

// ... or ...

el.onclick = function() {
  alert("Clicked");
}

偶数リスナースタイルでは複数のリスナーを追加できますが、コールバックハンドラスタイルは排他的です（1つしか存在できません）。

これらのハンドラーを複数の要素に追加する必要がある場合は、必要に応じてそれらを取得し、それぞれに個別に追加する必要があります。

14
maerics

私は通常、非常に強力な一種のグローバルイベントハンドラーを作成します。イベント「タイプ」nodeTypesのclassNameをキャプチャできます。名前を付けます。これが役立つと思います

document.onclick = eventRef

function eventRef(evt) {
    var han;
    evt || (evt = window.event);

    if (evt) {
        var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);

         // evt.type could be, mouseup, mousedown...
        // elem.id is the id or the element
        // elem.className is the class name of the element
        // you could nest expression, use substrings to extract part of a className
        if (evt.type=="click" && elem.id == "gotit" || elem.className == "someClassName") {  
            alert(elem.id);
        }
    }
}
2
david

ハンドラー関数を直接割り当てる代わりに、addEventListenerを使用することをお勧めします。

var div = document.getElementById('test');
div.addEventListener('click', function(){ 
    console.log('CLICKED');
});

私が最も重要だと思うものに名前を付けようとする理由はいくつかあります。

  1. addEventListenerを使用して非DOMオブジェクトに誤ってイベントリスナーを追加することはできません-onclick関数をオブジェクトに静かに割り当てる代わりに、コードが失敗します
  2. onclickを使用して1つのみ（追加するすべてのハンドラーの追加のコード操作なしで）イベントリスナーをアタッチできます。
2
ZenMaster

バニラjsのおかげで

document.addEventListener('click', function (event) {

// If the clicked element doesn't have the right selector, bail
if (!event.target.matches('input')) return;

// Don't follow the link
event.preventDefault();

// Log the clicked element in the console
console.log(event.target);

}, false);

これは、どの要素がcであるかも示します

1
Krishna Gupta

これについては興味深い記事です。同じアプローチを何度か使用しました。基本的に、イベントハンドラーをwindowに追加します。 http://mislav.uniqpath.com/js/handling-events-on-elements/

0
VoidMain