Skip to content

Commit 4a10b92

Browse files
committed
fix en #1739
1 parent 81e9f17 commit 4a10b92

File tree

1 file changed

+11
-27
lines changed
  • 2-ui/2-events/01-introduction-browser-events

1 file changed

+11
-27
lines changed

2-ui/2-events/01-introduction-browser-events/article.md

+11-27
Original file line numberDiff line numberDiff 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`"
294294
There 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

0 commit comments

Comments
 (0)