【JavaScript】jQueryのthisを生のJSで表現してみる。

jQueryのthisって便利だよね。

これに対するこれって感じでめっちゃ便利だけど、生のJSで実装する場合、
どうしたらよいんだろうかということで、書いてみた。

知人がつくったALT FRIENDSというページを基に書き換えてみる。

ALT FRIENDSは、画像に対して右クリックを押すとaltが表示されるという、画期的なページです。
これはjQueryで実装されているので生のJSに書き換えてみる。

元ページ

See the Pen ALT FRIENDS by Nasu Alipey (@alipeyoff) on CodePen.

JSの記述

$(document).ready(function() {
  //入力
  var $clickMeElement = $('#haltest img');
   //クリック動作
    $clickMeElement.bind('contextmenu',function() {
    $imgAlt = $(this).attr("alt");
        alert($imgAlt);
    });
});

＃haltest img を定義し、バインドさせ該当の画像の上で右クリックをしたら、alt値を取得しアラートを出す。

thisってやっぱり便利ですね。

これを書き換えていきます。

JSの記述

const IMG = document.querySelector("#haltest");
IMG.addEventListener("contextmenu", function(e){
  if(e.target.alt !== undefined){
      alert(e.target.alt);
   }
});

jQueryのthisは、生のJSでは使用できないのでまず、親要素を指定しています。
親要素内で右クリックを押して、もしalt値があれば（＝画像）でalt値を取得しアラートを出す。

これで完成！！

書き換えたもの（フォーク）

See the Pen ALT FRIENDS by paradox_tm (@takumaro-web) on CodePen.

これくらいの処理であれば、重いjQueryを読み込むよりもクッソ処理は高速になるかなーと思います。

それでは。