32865

[code]

    function aaa(){
      alert("aaa");
    }
    
    function bbb(){
       alert("bbb");
    }
[/code]

[code]

    <html>
    <table>
      <tr onclick="aaa();">
        <td><button  onclick=" bbb();">ボタン</button></td>
        <td>適当な文字列</td>
      </tr>
    </table>
    </html>
[/code]

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

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

[code]

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

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


CC BY-SA 3.0
2017-02-22T08:20:57.650
32863
2017-02-22T09:29:55.030
2017-02-22T09:29:55.030
8000
20773
question
javascript
親要素のイベントハンドラを先に発動させたい


この順番（bbb→aaa）で関数が呼ばれるのは、デフォルトのイベントハンドラの実行タイミングが、DOMのイベント伝播システムでいうバブリングフェーズ；発火点を起点に上向き（親要素側）に進行するときであるためです（[参考](https://www.w3.org/TR/DOM-
Level-3-Events/#event-
flow)）。これを上位（親要素）側からの進行時点（キャプチャフェーズ）で実行することを指定する場合には、addEventListenerの第三引数[
_useCapture_](https://developer.mozilla.org/en-
US/docs/Web/API/EventTarget/addEventListener#Parameters)にtrueを渡してイベントハンドラを登録します。  
なお、こうしたイベント伝播を考慮しない書き方も可能で、この場合は基本的に上位（親要素）側にだけイベントハンドラを設定しておいて、発火点をEventオブジェクトのtargetプロパティから取得して動作を分岐させる方法があります。

[code]

    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();
        }
    });
    */
[/code]

[code]

    <html>
    <table>
      <tr id="target">
        <td><button id="button">ボタン</button></td>
        <td>適当な文字列</td>
      </tr>
    </table>
    </html>
[/code]


CC BY-SA 3.0
2017-02-22T09:01:23.713
32865
2017-02-22T09:11:52.250
2017-02-22T09:11:52.250
32863
answer