2017/01/23更新

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



最後に

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

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

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。