cCan DOM events fire before my script is executed?

Question

I have a video element and a script that attaches an onplay handler to the video via jQuery:

<video id="vid" />
<!-- ... -->
<script type="text/javascript">
    $('#vid').on('play', function () {
        $(this).addClass('playing');
    });
</script>

According to this answer, users might be able to interact with the video player before the script is loaded. But I need to make sure that my event handler is attached before the onplay event can be fired.

To test this, I added a script right after the video that calls play(). The handler is run on all major browsers except WebKit, which doesn't play the video at all. Even wrapping the jQuery statement in a $().ready() function still lets the handler be attached before onplay.

Is it guaranteed that my script will never miss any events from the video in HTML5? Does the same apply to all DOM events? What if I add async to the script?

Kornel · Accepted Answer · 2012-04-05T15:00:51.450

A race condition in that case used to be possible:

<video autoplay src="…"></video>
<script>alert("wait!")</script>
<script>$('video').on('play',…)</script>

However, the spec has been changed to alleviate this problem. Now browsers are supposed to queue firing of events until next event loop run, instead of firing them immediately.

If the script attaching event handlers is an inline script immediately following the <video>, running without waiting for DOMReady, then race condition won't happen in compliant browsers.

If you use external or async script, wait for DOMReady, use setTimeout or synchronous XHR, then you may miss those events, since those things can cause event loop to be processed (although I'm not 100% sure whether network stall allows browsers to process the event loop).

I don't know whether WebKit has been updated to support the safer behavior. If you still have problems, then you can use methods that work even when events are fired instantly:

Use inline event handler:
```
<video onplay="…">
```
Create the element programmatically (document.createElement('video')) with handlers attached before it's inserted into the document.

I had problems with overriding the anchor element's click event on the iPad. If I tap the element before it's rendered, it often navigates away even though my event handler always prevents the default action. I ended up making my markup no-js-friendly so this became a non-issue. — Timothy003, Apr 05 '12 at 21:26
I'm revisiting this question three years later because Chrome is firing `error` events on `source` elements before my script can attach an event handler. An inline script doesn't guarantee that the race condition won't happen; indeed, if I add a megabyte of whitespace inside or before the script, Chrome will run the event loop while downloading the whitespace. — Timothy003, Apr 02 '15 at 21:47

score 0 · Answer 2 · edited Mar 02 '12 at 22:00

0

The best way to ensure that is to use RequireJS, and make sure you nest in the right order if needs be, or use the orderPlugin for RequireJS.

modernizer first.

edited Mar 02 '12 at 22:00

gen_Eric

223,194
41
299
337

answered Mar 02 '12 at 21:50

Eric Hodonsky

5,617
4
26
36

This way you can add modules and all that snazzy stuff, and load only the code you need upon execution. – Eric Hodonsky Mar 02 '12 at 21:51
1

How exactly does this relate to the question? – gen_Eric Mar 02 '12 at 21:52
This makes sure the video player isn't loaded before his event handler is ready as well... or however. This basically removes the guessing out of what loads first. – Eric Hodonsky Mar 02 '12 at 21:56

cCan DOM events fire before my script is executed?

2 Answers2