Top

脱jQuery .on() .off()

比較的新しい on() と off() の書き換えです。jQuery にしては若干わかりづらいような気もするメソッドですがネイティブに書き換えます。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

.on()

jQuery

$("#button").on("click", function() {
    alert("クリックされました");
});

書き換え JavaScript

document.getElementById("button").addEventListener("click", function() {
    alert("クリックされました");
}, false);

alert("クリックされました") は「クリックされました」というアラートメッセージを出す命令です。その部分に色々なコードを書くことで #button をクリックされた際に色々なイベントを起こすことが出来ます。"click" はイベントの種類です。今回は click ですが、mouseover や load 等のイベントを全て扱うことが出来ます。

.on() の書き換えが .addEventListener() となります。見た目はほぼ変わらないですね。addEventListener の方には最後の方に false というものが入っていますが、これに関しては入れておけばOKぐらいに認識で構いません。実際にはなくてもなんとかなるのですが、書くことが正式な書式になります。

なお、on() の中で $(this)を用いた場合、JavaScript の方では this となります。以下にその例を書きます。

jQuery($(this) あり)

$("#button").on("click", function() {
    $(this).css("color", "red");
});

書き換え JavaScript(this あり)

document.getElementById("button").addEventListener("click", function() {
    this.style.color = "red";
}, false);

$(this) = this のような感じです。ここではクリックされた要素を指します。ほぼ同じ感じで使えます。

.css() の書き換えは以下を参考にしてください。

参考:.css() の書き換え

スポンサーリンク

.off()

jQuery

$("#button").off("click", function() {
  alert("クリックされました");
});

書き換え JavaScript

document.getElementById("button").removeEventListener("click", function() {
  alert("クリックされました");
}, false);

.off() は .on() の逆でイベントを取り外す命令です。ここではアラートイベントが発生しないように取ってしまいます。

.off() の書き換えが .removeEventListener() です。使い方自体はほぼ .on() の時と変わりません。これも見た目が似ています。

まとめ

jQueryJavaScript
A.on("B", function() {
  //イベント内容
})
A.addEventListener("B", function() {
  //イベント内容
}, false)
A.off("B", function() {
  //イベント内容
})
A.removeEventListener("B", function() {
  //イベント内容
}, false)