jQueryなしで要素を取得してイベントを加える
普通に仕事してると、jQueryなしの環境ってほとんど無いし、そもそも効率がわるい。
しかも、自分のスタートがJavaScript == jQuery
みたいな環境だったので、実際にjQueryなしでJavaScriptを書く機会が殆どなかった。
その後一から勉強しなおしたので、一応知識としては習得したが、やはり実際の現場で、document.getElement~~~
とか書く機会はほとんどない。
練習にDOMエレメントの取得とイベントの設定を書いてみた。
関数
function AddEventAll(el,event,func){ //要素を取得 var $el = document.querySelectorAll(el); //要素の数を取得 var len = $el.length; //各要素にイベントを設定 for (var i = 0; i < len; i++){ $el[i].addEventListener(event, func); }; }
実行
//DOMの構築が終わってから実行 window.onload = function(){ AddEventAll('.hoge', 'click', hoge); } //イベントが発火すると実行される関数 function hoge(e){ e.preventDefault(); console.log('click!'); }
'セレクター名','イベント名',関数
を入れて実行します。
ここでは関数は別に切り出しています。
jQueryの感覚で書くと???になる箇所
- 要素を取得してもそのままイベントを加えるとエラー
- DOM構築が完了してから関数を実行しないと要素が取得できない
jQueryって本当に便利ですね…