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

javascript 複数の関数を同時に実行

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

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

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

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

JavaScriptのイベントハンドラ一覧|イベント|JavaScript/DOM|PHP & JavaScript Room
JavaScriptの基本~実用的な関数までサンプル付きで解説。 ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック(正規表現含む)など、 サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。 JavaScriptでDOM(Document Object Model)のメソッド・プロパティ...
プルダウンの内容変更時、
function test1()
function test2()
を同タイミングで呼び出すことをゴールとします。

微妙な例

<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()">
2つの変数を一気に記載して、その間にセミコロンを入れる!

まとめ

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

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

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

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

お知らせ

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

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

コメント

タイトルとURLをコピーしました