bata's log

フロントエンド系のTipsとかメモ

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って本当に便利ですね…