Listen to click events on elements that aren't appended

Question

I want to listen to click events on elements that are dynamically created and aren't appended. See this example:

document.addEventListener('click', function(e){
  if(e.target.tagName == 'BUTTON'){
    console.log('Click');
  }
});
document.createElement('button').click();

<button>Test</button>

The listener isn't called when creating an element and using the click method on it.

Why is this and how can I listen to those events?

Thanks!

Because you haven't inserted the new element in the document anywhere. It only exists in memory — charlietfl, Dec 22 '18 at 22:20
So how can I listen to events of elements that aren't inserted? — J. Doe, Dec 22 '18 at 22:24
Would need to add a listener to that new element itself. Why do you need to trigger a click on it in the first place? — charlietfl, Dec 22 '18 at 22:26
I'm trying to make a userscript that detects click events on dynamically created elements. — J. Doe, Dec 22 '18 at 22:30
Well you wouldn't be triggering a click on elements before they are inserted in document would you? — charlietfl, Dec 22 '18 at 22:35
I wouldn't but alot of websites do. Would it be possible by overwriting HTMLElement.click()? — J. Doe, Dec 22 '18 at 22:44
Only use case for triggering an event on an element outside the document that I can think of is for an ajax download that clicks on a new ``. Beyond that not really sure what you men by *"alot of websites do"* — charlietfl, Dec 22 '18 at 22:51
I'm just trying to cover all corner cases. So it's not posible to listen to events from elements outside of the DOM without adding listeners to them individually? — J. Doe, Dec 22 '18 at 22:59

CertainPerformance · Accepted Answer · 2018-12-22T23:51:44.690

As mentioned in comments, either overwrite HTMLButtonElement.prototype.click:

const nativeClick = HTMLButtonElement.prototype.click;
HTMLButtonElement.prototype.click = function(...args) {
  console.log('Click');
  nativeClick.apply(this, args);
};

document.createElement('button').click();

Or, a slightly different (and less efficient) method would be to overwrite Document.prototype.createElement such that newly created buttons get listeners attached to them:

const nativeCreateElement = Document.prototype.createElement;
Document.prototype.createElement = function(...args) {
  const createdElement = nativeCreateElement.apply(this, args);
  if (typeof args[0] === 'string' && args[0].toLowerCase() === 'button') {
    createdElement.addEventListener('click', () => {
      console.log('Click');
    });
  }
  return createdElement;
}

document.createElement('button').click();

Note that overwriting important built-in objects and methods like this is very hacky and isn't something to be used in serious production code - it's only something to consider when you have no other options, such as in the unusual environment of a userscript.

Thanks! My question was marked as duplicate at first by someone who didn't fully read it. It's for a userscript so that's fine. By the way it should work on all elements not just buttons. The button was just for the example. — J. Doe, Dec 22 '18 at 23:32

Listen to click events on elements that aren't appended

1 Answers1