jQuery - イベントでのアロー関数(ラムダ式)の使用について
公開日：2018-12-21
更新日：2019-05-14
更新日：2019-05-14
1. 概要
イベントでアロー関数(ラムダ式)を使用した場合、$(this) の値が無名関数(匿名関数)の場合と異なるため、注意が必要です。
例えば、アロー関数(ラムダ式)の場合は、$(function() { } の中で定義した場合と、外で定義した場合では、$(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>
実行結果：画面
