File tree Expand file tree Collapse file tree 1 file changed +11
-27
lines changed
2-ui/2-events/01-introduction-browser-events Expand file tree Collapse file tree 1 file changed +11
-27
lines changed Original file line number Diff line number Diff line change @@ -293,36 +293,20 @@ As we can see in the example above, we can set handlers *both* using a DOM-prope
293293````warn header="For some events, handlers only work with ` addEventListener ` "
294294There exist events that can't be assigned via a DOM-property. Must use ` addEventListener ` .
295295
296- For instance, the event ` transitionend ` (CSS animation finished) is like that .
296+ For instance, the event ` DOMContentLoaded ` , that triggers when the document is loaded and DOM is built .
297297
298- Try the code below. In most browsers only the second handler works, not the first one.
299-
300- ``` html run
301- <style >
302- input {
303- transition : width 1s ;
304- width : 100px ;
305- }
306-
307- .wide {
308- width : 300px ;
309- }
310- </style >
311-
312- <input type =" button" id =" elem" onclick =" this.classList.toggle('wide')" value =" Click me" >
313-
314- <script >
315- elem .ontransitionend = function () {
316- alert (" DOM property" ); // doesn't work
317- };
298+ ``` js
299+ document .onDOMContentLoaded = function () {
300+ alert (" DOM built" ); // will never run
301+ };
302+ ```
318303
319- * ! *
320- elem .addEventListener (" transitionend" , function () {
321- alert (" addEventListener" ); // shows up when the animation finishes
322- });
323- */ ! *
324- </script >
304+ ``` js
305+ document .addEventListener (" DOMContentLoaded" , function () {
306+ alert (" DOM built" ); // this way it works
307+ });
325308```
309+ So ` addEventListener ` is more universal. Although, such events are an exception rather than the rule.
326310````
327311
328312## Event object
You can’t perform that action at this time.
0 commit comments