<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - window event listeners callback order different in Safari than Chrome and Firefox"
   href="https://bugs.webkit.org/show_bug.cgi?id=234730">234730</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>window event listeners callback order different in Safari than Chrome and Firefox
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 15
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Mac (Intel)
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>macOS 11
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>New Bugs
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>opendarwin@lapcatsoftware.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=448055" name="attach_448055" title="Sample html demonstrating the inconsistency">attachment 448055</a> <a href="attachment.cgi?id=448055&action=edit" title="Sample html demonstrating the inconsistency">[details]</a></span>
Sample html demonstrating the inconsistency

The EventTarget.addEventListener() method has a boolean useCapture parameter:
<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters">https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters</a>

This mostly works the same in all browsers. However, it works differently in Safari for some window events such as "load" and "beforeunload":
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window#events">https://developer.mozilla.org/en-US/docs/Web/API/Window#events</a>

The target of these events is the window object itself, so technically you could say there are no capturing or bubbling event phases.

Consider the following code:

window.addEventListener("load", () => { console.log("load false"); }, false);
window.addEventListener("load", () => { console.log("load true"); }, true);
window.addEventListener("beforeunload", () => { console.log("beforeunload false"); }, false);
window.addEventListener("beforeunload", () => { console.log("beforeunload true"); }, true);

In Safari, the above useCapture true listeners are called prior to the above useCapture false listeners. However, in Chrome and Firefox, these listeners are called in the order registered, as if the useCapture parameter were irrelevant.

I won't argue which behavior is "correct". I'm just noting that Safari is inconsistent with the other browsers.</pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>