ホーム > ブログ > jquery function(e) と クロージャー

Webデザイナー ブログ

jquery function(e) と クロージャー

2016年8月4日(javascript)

eでもeventでもなんでもいいんですけど、

$(“div”).on(“click”, function(e) {
この「e」が必要な時が訪れました。

存在は知っていましたがいかんせんあまり必要に迫られる
ことがなかったのですが、ある背景エリアをクリックすると
イベントが起こるのですが、その背景エリア上にあるリンクを押したときも
背景エリアが押されたことになってしまい困っていたところ、
e の出番です。

eとはjQuery.eventのことらしいですが、
それはまあたくさんの情報を持ち合わせています。
細かくは省きますが、何をクリックしたとかも取得できるので、
e.target.localName と書いてnode名を分岐にして
回避することができました。

いや~便利ですね~ e

話は変わって、今度はクロージャー。
これはjsですが、こちらも存在は知っていますが、
使い道がなかったのですが今回使うことができました。

簡単に言うと別スコープのローカル変数を別の関数内から読みに行くことができる関数のことをクロージャと言います。
よく解説されるのが、クロージャーを何度もよんで、
数値がインクリメント(カウントアップ)されていくやつですね。

グローバル変数に関数を代入して数値なり値を保持しておけば、
そのグローバル変数が破棄されない限りは永久に値がリセットされることは
ありません。

関数内に作った一時的な変数だとその関数の外に出たとき、
外部からそのローカル変数にはアクセスできませんからね。

例えば、スイッチがオンの状態で、クリックするとアラートが出るボタンが
あったとします。それをオフの場合はクリックしてもなにも反応がない状態に
する時などに使えますね。

このスイッチをオンオフするイベントとボタンを押すとアラートが出るという二つの
イベントは両方ともオンオフの情報がからみます。
後者のイベントはオンオフの情報を拾えるようにしておかなければなりません。
そこでクロージャでオンオフ情報をグローバル変数に保持しておけば、
他のイベントからも自由にローカル変数を読みに行けるわけです。
通常の関数だとローカル変数を取りに行けないですからね。

まあクロージャを使わなくて、グローバル変数を
オンオフ関数のすぐ下に書いておいて、
切り替えるでもできなくないですが、
煩雑になりますし、バグの原因になるので、
クロージャ使った方が効率はいいですね。

人気ブログランキングへ
応援お願いします!

コメントをどうぞ