From 4ac8fd7f352e2650b4631448dae92dc6617c097d Mon Sep 17 00:00:00 2001 From: Craig Kovatch Date: Mon, 10 Aug 2020 17:06:38 -0700 Subject: [PATCH] Update 2020-08-10-react-v17-rc.md (#3190) Use modern syntax for a capture-phase event listener example: flags object rather than raw boolean --- content/blog/2020-08-10-react-v17-rc.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/blog/2020-08-10-react-v17-rc.md b/content/blog/2020-08-10-react-v17-rc.md index 4c29ad60..f68e083f 100644 --- a/content/blog/2020-08-10-react-v17-rc.md +++ b/content/blog/2020-08-10-react-v17-rc.md @@ -94,13 +94,13 @@ document.addEventListener('click', function() { }); ``` -You can fix code like this by converting your listener to use the [capture phase](https://javascript.info/bubbling-and-capturing#capturing). To do this, you can pass `true` as the third argument to `document.addEventListener`: +You can fix code like this by converting your listener to use the [capture phase](https://javascript.info/bubbling-and-capturing#capturing). To do this, you can pass `{ capture: true }` as the third argument to `document.addEventListener`: ```js document.addEventListener('click', function() { // Now this event handler uses the capture phase, // so it receives *all* click events below! -}, true); +}, { capture: true }); ``` Note how this strategy is more resilient overall -- for example, it will probably fix existing bugs in your code that happen when `e.stopPropagation()` is called outside of a React event handler. In other words, **event propagation in React 17 works closer to the regular DOM**.