Javascript のaddEventListener で複数あるボタンの中から、クリックされたものを判定しようとしています。
一つの<FORM>の中に、3つの<INPUT type="button" id="foo_button" ... >が在ります。
window.onload() 内で、3つのボタンに対して addEventListenerを 3つ書いています。
例】
var form_obj = document.MyForm;
// 1個目のボタン
document.getElementById("foo_button").addEventListener('click', function() {
form_obj.setAttribute( 'action' , 'foo.php' );
form_obj.submit();
}, false);
// 2個目のボタン
document.getElementById("bar_button").addEventListener('click', function() {
form_obj.setAttribute( 'action' , 'bar.php' );
form_obj.submit();
}, false);
// 3個目のボタン（省略）
上記のように<FORM>の中のどのボタンが押されたかによって、別々のページへ submitしようとしていますが。
1個目、2個目のボタンは思う通りのページへ飛んでくれるのですが、
3個目のボタンを押しても、ページに飛びません。全く反応がありません。なぜでしょうか？
javascript初心者ですが、
最近、document.getElementById("foo_button").addEventListener('click', function() { ...
の便利さにハマリ、
上記の障害にもハマッております。
ブラウザ：Chrome 11
そもそも 複数のaddEventListenerでボタンを判定する方法は良策なのでしょうか？
ベストアンサー
-
rikuba
満足25pt
そもそも 複数のaddEventListenerでボタンを判定する方法は良策なのでしょうか？
clickやkeydownといったイベントは、その発生源の要素のみならず、その祖先のノードにも伝播します（これをイベントバブリングと呼びます・バブリングしないイベントもあります）。バブリングするイベントは、発生源となりうる要素ではなく、より上位のノードにイベントリスナを登録することで、包括的に処理することができます。
addEventListenerで登録したイベントリスナ関数には、第一引数にイベントオブジェクトが渡されます。このオブジェクトには、発生したイベントに関する詳細な情報が含まれます（イベントの発生源となった要素、座標など）。
今回の例であれば、次のように1つの関数で処理することができます。これならwindow.onloadを待つ必要もありません。
document.addEventListener('click', function (e) { var target = e.target; /* クリックされた最深の要素 */ var form = target.form; /* テキストフィールドやボタンのformプロパティは、属するform要素を指す */ if (target.tagName === 'INPUT' && target.type === 'button') { /* もしtargetが<input type="button">なら */ switch (target.id) { case 'foo_button': form.action = 'foo.php'; form.submit(); break; case 'bar_button': form.action = 'bar.php'; form.submit(); break; case 'zoo_button': form.action = 'zoo.php'; form.submit(); break; default: break; } } }, false);
-
gdwtseq
-
gdwtseqその他の回答
-
HowAreYou
満足23pt
不要だと思われる情報でもできるだけ省略せずに記述 (実際のものをコピー&貼り付け) された方がいいと思います。
form の HTML とかスクリプトとか。
そこで、確認ですが、三つのボタンの ID はすべて別のものになっているでしょうか?
ひとつめが foo_button、ふたつめが bar_button で、みっつめがまた foo_button になっているとかはないでしょうか。
-
gdwtseq
-
1
1
1
