jQuery - イベントでのアロー関数(ラムダ式)の使用について

公開日：2018-12-21 更新日：2019-05-14
[jQuery]

1. 概要

イベントでアロー関数(ラムダ式)を使用した場合、$(this) の値が無名関数(匿名関数)の場合と異なるため、注意が必要です。
例えば、アロー関数(ラムダ式)の場合は、$(function() { } の中で定義した場合と、外で定義した場合では、$(this) の値が異なります。

//無名関数(匿名関数)
$(セレクタ).on("click", function(e) {
	//$(this) は、$(セレクタ)の要素
});

//アロー関数(ラムダ式)
$(セレクタ).on("click", (e) => {
	//$(this) は、実行した環境によって変わる
});

2. サンプル

ボタンをクリックすると、ボタンの色が変わります。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <input type="button" id="btn1" value="無名関数(匿名関数)" />
  <input type="button" id="btn2" value="アロー関数(ラムダ式) その１" />
  <input type="button" id="btn3" value="アロー関数(ラムダ式) その２" />

  <div id="msg"></div>
  <script>
    
    $(function() {

      //無名関数(匿名関数)
      $("#btn1").on("click", function(e) {
        $(this).css("background-color", "lightblue");
      });

      //アロー関数(ラムダ式) その１
      $("#btn2").on("click", (e) => {
        $(this)
          .children()
          .children("body")
          .find("#btn2")
          .css("background-color", "lightblue");
      });

    });
    
    //アロー関数(ラムダ式) その２
    $("#btn3").on("click", (e) => {
      
      var win = $(this)[0];

      //ボタンの背景色を薄い青にします
      var btn = win.document.getElementById("btn3");
      $(btn).css("background-color", "lightblue");

      //ボタンのフォントを大きくして、青にします
      $(win.document)
        .children()
          .children("body")
          .find("#btn3")
          .css("color", "blue")
          .css("font-size", "20px");
      
      if ($.isWindow( win )) {
        win.alert("$(this) は window です。");
      }
       
    });

  </script>
</body></html>

実行結果：画面



Tag

New Article