2013-07-23 14 views
22

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

jQueryの例:

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

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

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

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

答えて

49

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

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

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

+3

ここでは、「addEventListener」の詳細を読むことができますhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener「レガシーInternet ExplorerとattachEvent」までスクロールしてIE < 9サポート。 – vsr

+0

隠し要素はどうですか? – user924

6

あなたがで、この場合、アンカーには、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はブラウザ間の互換性を持ち、探している機能を多く提供していますできるだけ古いブラウザ。