純粋なJavascriptを使用して要素にイベントをバインドします。

Question

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

jQueryの例：

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

私はフラストレーションから要素にonClick属性を書くに近いんだけど、私はjQueryのイベントとDOM要素の間のリンクを理解したいと思います。

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

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

Answer 1

は、ここでは簡単な答えです：

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

すべての近代的なブラウザがHTMLを変更することなく、JavaScriptを通じDOMと対話するための全体のAPIをサポートしています。かなり良い鳥瞰図はこちらを参照してください：http://overapi.com/javascript

Answer 2

あなたがで、この場合、アンカーには、idで要素を識別：

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

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

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

そして最後に、イベントの機能は次のようなものになるだろう：

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

ますC古いブラウザやさまざまなブラウザとの互換性が必要ない場合は、単純化して1行にすることができますが、jQueryはブラウザ間の互換性を持ち、探している機能を多く提供していますできるだけ古いブラウザ。