Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. When an event is fired on an element that has parent elements (e.g. the <video> in our case), modern browsers run two different phases — the capturing phase and the bubbling phase. In the capturing phase: The browser checks to see if the element’s outer-most ancestor (<html>) has an onclick event handler registered on it in the capturing phase, and runs it if so. Then it moves on to the next element inside <html> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on. In the bubbling phase, the exact opposite occurs: The browser checks to see if the element that was actually clicked on has an onclick event handler registered on it in the bubbling phase, and runs it if so. Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <html> element. Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.
JS DOM objects have properties. These properties are kind of like instance variables for the particular element. As such, a property can be different types (boolean, string, etc.). Properties can be accessed using jQuery’s prop method (as seen below) and also by interacting with the object in vanilla JS. All of the properties we set in the HTML are available through prop. Other properties are available too, such as style, even though we didn’t explicitly set them. Properties can also be updated through the prop method:What is an attribute? Attributes are in the HTML itself, rather than in the DOM. They are very similar to properties, but not quite as good. When a property is available it’s recommended that you work with properties rather than attributes. An attribute is only ever a string, no other type. If an element has a default value, the attribute shows the default value even if the value has changed. Attributes can be useful when you want to set a custom attribute, that is, when there is no property associated. But, to be fair, you can also use custom properties (although this might be bad practice).