0

function aaa(){
  alert("aaa");
}

function bbb(){
   alert("bbb");
}
<html>
<table>
  <tr onclick="aaa();">
    <td><button  onclick=" bbb();">ボタン</button></td>
    <td>適当な文字列</td>
  </tr>
</table>
</html>

ボタンを押したとき、
動作が,bbb()→aaa()となるのですが、
これを、aaa()→bbb()と発動される順番を指定することはできないでしょう?

ただし、"適当な文字列"にクリックしたときは、aaa()は発動したままです。
また、以下もダメです。(いまは単純化してるだけなので・・)

<td><button  onclick="aaa();bbb();">ボタン</button></td>
   <td onclick="aaa();">適当な文字列</td>

ご教授よろしくお願い致します。

1 件の回答 1

4

この順番(bbb→aaa)で関数が呼ばれるのは、デフォルトのイベントハンドラの実行タイミングが、DOMのイベント伝播システムでいうバブリングフェーズ;発火点を起点に上向き(親要素側)に進行するときであるためです(参考)。これを上位(親要素)側からの進行時点(キャプチャフェーズ)で実行することを指定する場合には、addEventListenerの第三引数useCaptureにtrueを渡してイベントハンドラを登録します。
なお、こうしたイベント伝播を考慮しない書き方も可能で、この場合は基本的に上位(親要素)側にだけイベントハンドラを設定しておいて、発火点をEventオブジェクトのtargetプロパティから取得して動作を分岐させる方法があります。

const aaa = function() {
    console.log('aaa')
};
const bbb = function() {
    console.log('bbb')
};

const $target = document.querySelector('#target');
const $button = document.querySelector('#button');

$target.addEventListener('click', aaa, true);
$button.addEventListener('click', bbb, false);

/*
// alternative
$target.addEventListener('click', e => {
    aaa();
    if (e.target === $button) {
        bbb();
    }
});
*/
<html>
<table>
  <tr id="target">
    <td><button id="button">ボタン</button></td>
    <td>適当な文字列</td>
  </tr>
</table>
</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。