MutationObserver and EventListeners

Question

I have this highly specific problem that I can not seem to solve, i need to listen to the DOM change events and I have used Mutation Observer API and I can register addition of div to the DOM but I need to be able to react to clicks on that div and persist data that I get back across navigation for that I resorted to localStorage but I can not seem to trigger observe method when user clicks the link that has been dynamically added.

For better clarification here is what I want to achieve.

Notification is sent and MutationObserver registeter it gets triggered via observe
User clicks on newly added div it expands navigation
Get the notification message, parse it push it to array then store it in localStorage
On next click user is taken to new page where I also need to pickup some data and append it to localStorage

So far I can react to new DOM additions. And I can filter additions of what I need.

Here is the code

function watchForOrder() {
  var mutationObserver = new MutationObserver(function(mutation) {
    mutation.forEach(function(mutation) {
      console.log(mutation);
      //Possible place to create object to store information that I need.
    });
  });
  mutationObserver.observe(document.body, {
    // attributes: true,
    // characterData: true,
    childList: true,
    subtree: true
  });

I also can not disconnect observer because I need it to listen for new additions all the time so my concern is that it may impact performance severely.

tl;dr How can I combine MutationRecord tap into that and set up regular event listener or is that even good idea ?

Why do you need to use mutation observers to watch for added elements, though? Are you trying to augment third-party code? — Etheryte, Mar 05 '18 at 15:57
For the dynamically added elements -> [Event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) — Andreas, Mar 05 '18 at 15:58
Here is the deal, I am writing Chrome Extension that will listen for events and additions of elements and just create object that I will send on 3rd party endpoint for analytics. Edits: It is basically highly specific scrapper. — ukaric, Mar 05 '18 at 15:59
I've read the question several times and I still don't understand what's the problem. Can you illustrate what effect the code produces currently and what's the desired effect? Anyway, performance-related concerns can be answered using console.time or devtools performance profiler on several sites of varying complexity. — wOxxOm, Mar 05 '18 at 16:11
I'm having issues attaching eventhandler on newly created DOM node that I need to know when is clicked so I can measure time from start of certain action until dismiss of notification. And for some reason Mutation wont trigger on mouseclick on new div. So if there is way to actually attach eventhandler to a MutationRecord that would be awesome. Or it can all be done via Observer — ukaric, Mar 05 '18 at 16:18
@wOxxOm I will literary sketch the flow later today if that will be of any help. — ukaric, Mar 05 '18 at 16:19
MutationRecord can't have event listeners. Elements listed in the record can, of course. — wOxxOm, Mar 05 '18 at 16:21

score 1 · Answer 1 · answered Nov 18 '19 at 06:56

I was facing a similar issue although my use-case was much easier. I just wanted to attach an onclick event listener to every element as the user scrolls down the news feed. One solution is to simply use "onclick" attribute on the HTML element itself and using "this" you could do what you want.

Another solution is to register an event listener inside the mutation observer. Every time the mutation observer runs (when elements are added/removed) the event listener will get attached to ALL the child elements. This is super clean and then within the event listener you could just call a function that has the logic for making what you want work for 1 element.

MutationObserver and EventListeners

1 Answers1