脱jQuery .on() .off()

.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() の時と変わりません。これも見た目が似ています。

まとめ