File tree 1 file changed +11
-27
lines changed
2-ui/2-events/01-introduction-browser-events
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
293
293
````warn header="For some events, handlers only work with ` addEventListener ` "
294
294
There exist events that can't be assigned via a DOM-property. Must use ` addEventListener ` .
295
295
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 .
297
297
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
+ ```
318
303
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
+ });
325
308
```
309
+ So ` addEventListener ` is more universal. Although, such events are an exception rather than the rule.
326
310
````
327
311
328
312
## Event object
You can’t perform that action at this time.
0 commit comments