web-dev-qa-db-ja.com

純粋なJavaScriptを使用してイベントを要素にバインドする

私はAPIを書いていますが、残念ながらjQueryやサードパーティのライブラリを避ける必要があります。 jQueryを介してイベントはどのくらい正確に要素にバインドされますか？

jQueryの例：

$('#anchor').click(function(){
    console.log('anchor');
});

フラストレーションのない要素にonClick属性を書くことに近づいていますが、jQueryイベントとDOM要素の間のリンクを理解したいと思います。

要素は、マークアップ自体が変更されていないときにjQueryイベントを発生させることをどの程度正確に知っていますか？彼らはどのようにしてDOMイベントをキャッチし、それをオーバーライドしますか？

独自のObserverハンドラーを作成しましたが、要素をObserverイベントにリンクする方法を十分に理解できません。

javascripteventsclick
28
Wancieho

ここに簡単な答えがあります：

document.getElementById('anchor').addEventListener('click', function() {
  console.log('anchor');
});

最新のブラウザはすべて、HTMLを変更せずにJavaScriptを介してDOMと対話するためのAPI全体をサポートしています。かなり良い鳥瞰図についてはこちらをご覧ください： http://overapi.com/javascript

59
Dan Tao

Id、この場合はアンカー、によって要素を識別します：

var el = document.getElementById('anchor');

次に、クリックイベントを割り当てる必要があります。

el[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? 'click' : 'onclick', myClickFunc, false);

そして最後に、イベントの機能は次のようになります。

function myClickFunc()
{
    console.log('anchor');
}

古いブラウザーやさまざまなブラウザーとの互換性が必要ない場合は、単純化するか、ワンライナーに変えることができますが、jQueryはブラウザー間の互換性を備えており、探している機能を最大限に提供するために最善を尽くしていますできる限り多くの古いブラウザ。

9
txpeaceofficer09