イベント発生時に複数の関数(function)を実行する方法

先日公開したどこ旅の追加コンテンツを開発しています。
そのほとんどをjavascriptで動かそうと思っています。

javascriptに苦手意識があり今まで極力避けてきたのですが、結構わかってくると面白いですね。

javascriptといったら関数(function)を作って、それを呼び出すという方法が主な使い方だと思うのですが、１つのイベント（今回はonchangeでした)発生時に複数の関数を呼び出すことに迷いが出たので、今回の記事ではそのシェアをさせていただきます。

そもそもイベントがよくわからない方はこちらがオススメ↓

JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room

JavaScriptの基本～実用的な関数までサンプル付きで解説。 ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック（正規表現含む）など、 サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。 JavaScriptでDOM（Document Object Model）のメソッド・プロパティ...

phpjavascriptroom.com

微妙な例

<select name="aaa" id="aaa" onchange="test1()" onclick="test2()">

というときみたいに

<select name="aaa" id="aaa" onchange="test1()" onchange="test2()">

でも動きますが、ちょっとカッコ悪いですね。

正解

綺麗な形はこれです。

<select name="aaa" id="aaa" onchange="test1();test2()">

まとめ

fuction呼び出し用のまとめfunctionを作ってもいい気もしますが、、、

matome(){
	test1();
	test2();
}

セミコロンで区切るだけなのでこのほうが簡単でいいでしょう。

onchangeでお話ししましたが、その他のイベントの場合でも使えるのでこれを１つ覚えてしまえば応用が効くでしょう！

お知らせ

海外旅行が好きな方、是非どこ旅というサイトを使ってみてください！

気温や飛行時間から海外旅行先を検索 | どこ旅

気温や飛行時間からお好みの旅先を探すことができます。具体的な場所は決まっていなくても、あなたにおすすめの旅行先を見つけることができます。

doko-tabi.com