add a way to add listener only to some nodes

[marcosvega91]

Summary 💡

We should add event listeners to only some elements if a data attribute is used in markup

Examples 🌈

as suggested by Kent we can lister for a [data-listen-only] attribute. If some elements have this attribute we could attach event listener only on those elements.

Motivation 🔦

Because the user can be interested only on some elements

[marcosvega91]

My idea is to do something similar

diff --git a/src/components/DomEvents.js b/src/components/DomEvents.js
index f5cd663..971a9b5 100644
--- a/src/components/DomEvents.js
+++ b/src/components/DomEvents.js
@@ -62,11 +62,14 @@ function addLoggingEvents(node, log) {
       if (event.target === event.currentTarget) {
         return;
       }
+      const onlyNode = node.querySelector('[data-listen-only]');
 
-      log({
-        event: eventType,
-        target: getElementData(event.target),
-      });
+      if (!onlyNode || event.target.matches('[data-listen-only]')) {
+        log({
+          event: eventType,
+          target: getElementData(event.target),
+        });
+      }
     };
   }
   const eventListeners = [];

I'm worried about performance issue of retrieving every time the node.
@smeijer What do you think?

[smeijer]

@marcosvega91, I think it makes sense to add this to #171.

The way that I see it, is that there is no difference in filtering on Event or on Target.

We need to think of a way to make the element selections, but I would prefer to have it be done in a visual way, and not with attributes.

The reasoning for that is, that attributes will not work when using devtools. They'll require the developer/tester to update the markup. Which is not always possible.

[marcosvega91]

Yes right I didn't think about devtools. Ok I'll close this