You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: 2-ui/2-events/03-event-delegation/article.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -163,7 +163,7 @@ The handler reads the attribute and executes the method. Take a look at the work
163
163
164
164
Please note that `this.onClick` is bound to `this` in `(*)`. That's important, because otherwise `this` inside it would reference the DOM element (`elem`), not the `Menu` object, and `this[action]` would not be what we need.
165
165
166
-
So, what the delegation gives us here?
166
+
So, what advantages does delegation give us here?
167
167
168
168
```compare
169
169
+ We don't need to write the code to assign a handler to each button. Just make a method and put it in the markup.
@@ -242,13 +242,13 @@ That may become really convenient -- no need to write JavaScript for every such
242
242
243
243
We can combine multiple behaviors on a single element as well.
244
244
245
-
The "behavior" pattern can be an alternative of mini-fragments of JavaScript.
245
+
The "behavior" pattern can be an alternative to mini-fragments of JavaScript.
246
246
247
247
## Summary
248
248
249
249
Event delegation is really cool! It's one of the most helpful patterns for DOM events.
250
250
251
-
It's often used to add same handling for many similar elements, but not only for that.
251
+
It's often used to add the same handling for many similar elements, but not only for that.
252
252
253
253
The algorithm:
254
254
@@ -261,12 +261,12 @@ Benefits:
261
261
```compare
262
262
+ Simplifies initialization and saves memory: no need to add many handlers.
263
263
+ Less code: when adding or removing elements, no need to add/remove handlers.
264
-
+ DOM modifications: we can mass add/remove elements with `innerHTML` and alike.
264
+
+ DOM modifications: we can mass add/remove elements with `innerHTML` and the like.
265
265
```
266
266
267
267
The delegation has its limitations of course:
268
268
269
269
```compare
270
270
- First, the event must be bubbling. Some events do not bubble. Also, low-level handlers should not use `event.stopPropagation()`.
271
-
- Second, the delegation may add CPU load, because the container-level handler reacts on events in any place of the container, no matter if they interest us or not. But usually the load is negligible, so we don't take it into account.
271
+
- Second, the delegation may add CPU load, because the container-level handler reacts on events in any place of the container, no matter whether they interest us or not. But usually the load is negligible, so we don't take it into account.
0 commit comments