[Javascript] onclickなどでbind関数を使って、任意の値をイベントハンドラーに渡す

こんにちは、@yoheiMuneです。
Function.prototype.bindの第2引数以降を使うと、conclickなどに任意の値を渡せるんですね。便利だったのでブログに書いておきたいと思います。

目次

bindの第2引数以降を使って任意の値を関数に渡す

通常、呼び出す関数のthisを指定するために使うことが多いbindですが、以下のように実装すると、onclickなどのイベントハンドラーで関数に任意の値を渡すことができます。

// なんらかの値
var user = { id : 1, name : 'Yohei'};

// コールバック関数
// userを引数で渡すことができます。
function handleClick(user, e) {
    alert('選択されました：' + JSON.stringify(user));
}

// onclickを指定する
var btn = document.querySelector('#myButton');
btn.onclick = handleClick.bind(null, user); // 第2引数でuserを渡します。

以下がデモです。

bindの第2引数で値を渡す例

と、こんな感じで使うことができます。便利だなーと今更ながら発見しました。

参考サイト

bind関数は以下で詳細を確認することができます。
Function.prototype.bind() - JavaScript | MDN

最後に

最近ジョインしたチームで使われていて初めて知りました。細かい点でも色々と便利なことがあるもんですね！

最後になりますが本ブログでは、フロントエンド・Go言語・Node.js・Python・Linux・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！