Is possible to add event listener (Javascript) to all dynamically generated elements?
I&#39;m not the owner of the page, so I cannot add a listener in a static way.

For all the elements created when the page loaded I use:
  
    doc.body.addEventListener(&#39;click&#39;, function(e){
	//my code
    },true);

I need a method to call this code when new elements appear on the page, but I cannot use jQuery (delegate, on, etc cannot work in my project). How can I do this?

add event listener on elements created dynamically

I have a react component like :


    import React, { PropTypes, Component } from &#39;react&#39;
    
    
    class MyComponent extends Component {
    
        componentDidMount() {
           window.addEventListener(&quot;beforeunload&quot;, function (event) {
    			console.log(&quot;hellooww&quot;)
    			event.returnValue = &quot;Hellooww&quot;
    		})
        }
    
        componentWillUnmount() {
            window.removeEventListener(&quot;beforeunload&quot;, function (event) {
    			console.log(&quot;hellooww&quot;)
    			event.returnValue = &quot;Hellooww&quot;
    		})
        }
    
        render() {
    
            return (
                &lt;div&gt;
                    Some content
                &lt;/div&gt;
            )
        }
    
    }
    
    export default MyComponent

Here event lister is added to the component. When I refresh the page it gives me pop up asking to leave the page. 

But when I go to another page and do refresh it again shows the same pop-up.

I am removing the `eventListener` from the component on `componentWillUnmount`. Then why it is not being removed?

How can I remove the `beforeunload` event on other pages?

reactjs event listener beforeunload added but not removed

I have used

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;button type=&quot;button&quot; id=&quot;button&quot;&gt;Click&lt;/button&gt;
      &lt;pre id=&quot;output&quot;&gt;Not Loading...&lt;/pre&gt;

      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/babel&quot;&gt;
        document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
          const button = document.getElementById(&#39;button&#39;);
          const output = document.getElementById(&#39;output&#39;);

          output.textContent = &#39;Loading...&#39;;

          addEventListener(&#39;click&#39;, function () {
            output.textContent = &#39;Done&#39;;
          });
         });
      &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

but it seems the code inside `document.addEventListener(&#39;DOMContentLoaded&#39;, function () {});` is not loading.

If I remove this from my code, it suddenly works.

I have made a [JS Bin here][1].


  [1]: https://jsbin.com/misuxuhiba/edit?html,output

Code inside DOMContentLoaded event not working

I have a button, and I added some `eventlistners` to it:

    document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;, funcA, false);
    document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;, funcB, false);
    document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;, funcC, false);
    document.getElementById(&quot;btn&quot;).addEventListener(&quot;blur&quot; , funcD, false);
    document.getElementById(&quot;btn&quot;).addEventListener(&quot;focus&quot;, funcE, false);

    &lt;button id=&quot;btn&quot;&gt;button&lt;/button&gt;

I can remove them by:

    document.getElementById(&quot;btn&quot;).removeEventListener(&quot;click&quot;,funcA);

What if I want I want to remove all listeners at once, or I don&#39;t have the function reference (`funcA`)? Is there a way of doing that, or I have to remove them one by one?

How to remove all listeners in an element?

What&#39;s the difference between `addEventListener` and `onclick`?

    var h = document.getElementById(&quot;a&quot;);
    h.onclick = dothing1;
    h.addEventListener(&quot;click&quot;, dothing2);

The code above resides together in a separate .js file, and they both work perfectly.

addEventListener vs onclick

While working with browser events, I&#39;ve started incorporating Safari&#39;s touchEvents for mobile devices. I find that `addEventListener`s are stacking up with conditionals. *This project can&#39;t use JQuery.*

A standard event listener:

    /* option 1 */
    window.addEventListener(&#39;mousemove&#39;, this.mouseMoveHandler, false);
    window.addEventListener(&#39;touchmove&#39;, this.mouseMoveHandler, false);

    /* option 2, only enables the required event */
    var isTouchEnabled = window.Touch || false;
    window.addEventListener(isTouchEnabled ? &#39;touchmove&#39; : &#39;mousemove&#39;, this.mouseMoveHandler, false);



JQuery&#39;s `bind` allows multiple events, like so:

    $(window).bind(&#39;mousemove touchmove&#39;, function(e) {
        //do something;
    });

**Is there a way to combine the two event listeners as in the JQuery example?** ex:

    window.addEventListener(&#39;mousemove touchmove&#39;, this.mouseMoveHandler, false);

Any suggestions or tips are appreciated!

Binding multiple events to a listener (without JQuery)?

I have to use vanilla JavaScript for a project.  I have a few functions, one of which is a button that opens a menu.  It works on pages where the target id exists, but causes an error on pages where the id doesn&#39;t exist.  On those pages where the function cannot find the id, I receive a &quot;Cannot read property &#39;addEventListener&#39; of null &quot; error and none of my other functions work.

Below is the code for the button that opens the menu. 

    function swapper() {
    toggleClass(document.getElementById(&#39;overlay&#39;), &#39;open&#39;);
    }

    var el = document.getElementById(&#39;overlayBtn&#39;);
    el.addEventListener(&#39;click&#39;, swapper, false);

    var text = document.getElementById(&#39;overlayBtn&#39;);
    text.onclick = function(){
    this.innerHTML = (this.innerHTML === &quot;Menu&quot;) ? &quot;Close&quot; : &quot;Menu&quot;;
    return false;
    };

How do I deal with this? I probably need to all wrap this code in another function or use an if/else statement so that it only searches for the id on specific pages, but not sure exactly. 

Cannot read property &#39;addEventListener&#39; of null

Here is my problem: is it somehow possible to check for the existence of a dynamically attached event listener? Or how can I check the status of the &quot;onclick&quot; (?) property in the DOM? I have searched the internet just like Stack Overflow for a solution, but no luck. Here is my html:

&lt;!-- language: lang-html --&gt;

    &lt;a id=&quot;link1&quot; onclick=&quot;linkclick(event)&quot;&gt; link 1 &lt;/a&gt;
    &lt;a id=&quot;link2&quot;&gt; link 2 &lt;/a&gt; &lt;!-- without inline onclick handler --&gt;

Then in Javascript I attach a dynamically created event listener to the 2nd link:

&lt;!-- language: lang-js --&gt;

    document.getElementById(&#39;link2&#39;).addEventListener(&#39;click&#39;, linkclick, false);

The code runs well, but all my attempts to detect that attached listener fail:

&lt;!-- language: lang-js --&gt;

    // test for #link2 - dynamically created eventlistener
    alert(elem.onclick); // null
    alert(elem.hasAttribute(&#39;onclick&#39;)); // false
    alert(elem.click); // function click(){[native code]} // btw, what&#39;s this?

[jsFiddle is here](https://jsfiddle.net/qv0k7Lor/).
If you click &quot;Add onclick for 2&quot; and then &quot;[link 2]&quot;, the event fires well, 
but the &quot;Test link 2&quot; always reports false.
Can somebody help?


How to check whether dynamically attached event listener exists or not?

I want to call a function after a document loads, but the document may or may not have finished loading yet.  If it did load, then I can just call the function. If it did NOT load, then I can attach an event listener. I can&#39;t add an eventlistener after onload has already fired since it won&#39;t get called.  So how can I check if the document has loaded?  I tried the code below but it doesn&#39;t entirely work.  Any ideas?

    var body = document.getElementsByTagName(&#39;BODY&#39;)[0];
    // CONDITION DOES NOT WORK
    if (body &amp;&amp; body.readyState == &#39;loaded&#39;) {
        DoStuffFunction();
    } else {
        // CODE BELOW WORKS
        if (window.addEventListener) {  
            window.addEventListener(&#39;load&#39;, DoStuffFunction, false);
        } else {
            window.attachEvent(&#39;onload&#39;, DoStuffFunction);
        }
    }

Javascript - How to detect if document has loaded (IE 7/Firefox 3)

I&#39;m using a `keypress` listener eg.. 

    addEventListener(&quot;keypress&quot;, function(event){

    }
   
However, this doesn&#39;t seem to detect a backspace which erases text... 

Is there a different listener I can use to detect this?

JavaScript listener, &quot;keypress&quot; doesn&#39;t detect backspace?

I am just starting to mess around with Angular 2 and I wonder if anyone can tell me the best way to dynamically add and remove event listeners from elements.

I have a component set up. When a certain element in the template is clicked I want to add a listener for `mousemove` to another element of the same template. I then want to remove this listener when a third element is clicked.

I kind of got this working just using plain Javascript to grab the elements and then calling the standard `addEventListener()` but I wondered if there was a more &quot;*Angular2.0*&quot; way of doing this that I should be looking into.

Dynamically add event listener

I have attached an event to a text box using `addEventListener`. It works fine. My problem arose when I wanted to trigger the event programmatically from another function. 

How can I do it?

How to trigger event in JavaScript?

I have created a checkbox dynamically. I have used `addEventListener` to  call a function on click of the checkbox, which works in Google Chrome and Firefox but **doesn&#39;t work in Internet Explorer 8**. This is my code:

    var _checkbox = document.createElement(&quot;input&quot;);
    _checkbox.addEventListener(&quot;click&quot;, setCheckedValues, false);


`setCheckedValues` is my event handler.

addEventListener not working in IE8

I&#39;m trying to add event listener to multiple objects using a for loop, but end up with all listeners targeting the same object --&gt; the last one.

If I add the listeners manually by defining boxa and boxb for every instance, it works. I guess it&#39;s the addEvent for-loop that&#39;s not working the way I hoped for. Maybe I use the wrong approach altogether.

Example using 4 of the class=&quot;container&quot;
Trigger on container 4 works the way it&#180;s supposed to.
Trigger on container 1,2,3 trigger event on container 4, but only if trigger has already been activated.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    // Function to run on click:
    function makeItHappen(elem, elem2) {
      var el = document.getElementById(elem);
      el.style.backgroundColor = &quot;red&quot;;
      var el2 = document.getElementById(elem2);
      el2.style.backgroundColor = &quot;blue&quot;;
    }

    // Autoloading function to add the listeners:
    var elem = document.getElementsByClassName(&quot;triggerClass&quot;);

    for (var i = 0; i &lt; elem.length; i += 2) {
      var k = i + 1;
      var boxa = elem[i].parentNode.id;
      var boxb = elem[k].parentNode.id;

      elem[i].addEventListener(&quot;click&quot;, function() {
        makeItHappen(boxa, boxb);
      }, false);
      elem[k].addEventListener(&quot;click&quot;, function() {
        makeItHappen(boxb, boxa);
      }, false);
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;one&quot; id=&quot;box1&quot;&gt;
        &lt;p class=&quot;triggerClass&quot;&gt;some text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;two&quot; id=&quot;box2&quot;&gt;
        &lt;p class=&quot;triggerClass&quot;&gt;some text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;one&quot; id=&quot;box3&quot;&gt;
        &lt;p class=&quot;triggerClass&quot;&gt;some text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;two&quot; id=&quot;box4&quot;&gt;
        &lt;p class=&quot;triggerClass&quot;&gt;some text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

addEventListener using for loop and passing values

I have the following code to add eventListener

     area.addEventListener(&#39;click&#39;,function(event) {
			      app.addSpot(event.clientX,event.clientY);
			      app.addFlag = 1;
			  },true);


It is working correctly as expected..Later in another function i tried to remove the event listener using the following code

     area.removeEventListener(&#39;click&#39;,function(event) {
			      app.addSpot(event.clientX,event.clientY);
			      app.addFlag = 1;
			  },true);
But the even listener is not removed..Why is it happening?Is there any problem with my removeEventListener()?
Note:Here area is something like document.getElementById(&#39;myId&#39;)

Javascript removeEventListener not working

    document.getElementById(&#39;container&#39;).addEventListener(&#39;copy&#39;,beforecopy,false );

In Chrome / Safari, the above will run the &quot;beforecopy&quot; function when the content on the page is being copied. MSIE is supposed to support this functionality as well, but for some reason I&#39;m getting this error:

&gt; &quot;Object doesn&#39;t support this property or method&quot;

Now, it&#39;s my understanding that Internet Explorer won&#39;t play with the body node, but I would have thought providing a node by ID would work fine. Does anyone have any ideas about what I&#39;m doing wrong? Thanks in advance.

** Bonus points for anyone who can tell me what the 3rd parameter &quot;False&quot; is good for.

MSIE and addEventListener Problem in Javascript?

I&#39;m wondering how to use `addEventListener` respectively `attachEvent` correctly?

    window.onload = function (myFunc1) { /* do something */ }

    function myFunc2() { /* do something */ }

    if (window.addEventListener) {
      window.addEventListener(&#39;load&#39;, myFunc2, false);
    } else if (window.attachEvent) {
      window.attachEvent(&#39;onload&#39;, myFunc2);
    }

     // ...
or

    function myFunc1() { /* do something */ }

    if (window.addEventListener) {
      window.addEventListener(&#39;load&#39;, myFunc1, false);
    } else if (window.attachEvent) {
      window.attachEvent(&#39;onload&#39;, myFunc1);
    }

    function myFunc2() { /* do something */ }

    if (window.addEventListener) {
      window.addEventListener(&#39;load&#39;, myFunc2, false);
    } else if (window.attachEvent) {
      window.attachEvent(&#39;onload&#39;, myFunc2);
    }

     // ...

?

Is this cross-browser secure or should I better go with something like this:

    function myFunc1(){ /* do something */ }
    function myFunc2(){ /* do something */ }
    // ...
    
    function addOnloadEvent(fnc){
      if ( typeof window.addEventListener != &quot;undefined&quot; )
        window.addEventListener( &quot;load&quot;, fnc, false );
      else if ( typeof window.attachEvent != &quot;undefined&quot; ) {
        window.attachEvent( &quot;onload&quot;, fnc );
      }
      else {
        if ( window.onload != null ) {
          var oldOnload = window.onload;
          window.onload = function ( e ) {
            oldOnload( e );
            window[fnc]();
          };
        }
        else
          window.onload = fnc;
      }
    }
    
    addOnloadEvent(myFunc1);
    addOnloadEvent(myFunc2);
    // ...

AND: Say `myfunc2` is for IE 7 only. How to modify the correct/preferred method accordingly?

Correct usage of addEventListener() / attachEvent()?

The situation is somewhat like-

    var someVar = some_other_function();
    someObj.addEventListener(&quot;click&quot;, function(){
        some_function(someVar);
    }, false);

The problem is that the value of `someVar` is not visible inside the listener function of the `addEventListener`, where it is probably being treated as a new variable.

How to pass arguments to addEventListener listener function?

Can someone explain the program flow of this JavaScript code: 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    const $leaveRoom = document.querySelector(&#39;#leave-button&#39;);
    let a = 1;
    $leaveRoom.addEventListener(&#39;click&#39;, () =&gt; {
      console.log(a);
      console.log(&quot;check&quot;);
      a++;
      $leaveRoom.click();
      console.log(a);
      a++;
    });

&lt;!-- language: lang-html --&gt;

    &lt;button id=&quot;leave-button&quot;&gt;Leave Room&lt;/button&gt;

&lt;!-- end snippet --&gt;

```
The Output was:
1
check
2
check
3
4
```

This question may sound dumb but I am new to JavaScript. I am not able to understand the program flow of this code. I want to know how did I get 3 &amp; 4 in the output.

Why doesn&#39;t triggering click() inside a click event listener cause an infinite loop?

What is the equivalent to the Element Object in Internet Explorer 9?


    if (!Element.prototype.addEventListener) {
        Element.prototype.addEventListener = function() { .. } 
    } 

How does it works in Internet Explorer?

If there&#39;s a function equal to `addEventListener` and I don&#39;t know, explain please. 

Any help would be appreciated. Feel free to suggest a completely different way of solving the problem.

addEventListener in Internet Explorer

I&#39;ve created an object that has several methods. Some of these methods are asynchronous and thus I want to use events to be able to perform actions when the methods are done. To do this I tried to add the addEventListener to the object.

[jsfiddle][1]

	var iSubmit = {
		addEventListener: document.addEventListener || document.attachEvent,
		dispatchEvent: document.dispatchEvent,
		fireEvent: document.fireEvent,   
		

		//the method below is added for completeness, but is not causing the problem.

		test: function(memo) {
			var name = &quot;test&quot;;
			var event;
			if (document.createEvent) {
				event = document.createEvent(&quot;HTMLEvents&quot;);
				event.initEvent(name, true, true);
			} else {
				event = document.createEventObject();
				event.eventType = name;
			}
			event.eventName = name;
			event.memo = memo || { };
			
			if (document.createEvent) {
				try {
					document.dispatchEvent(event);
				} catch (ex) {
					iAlert.debug(ex, &#39;iPushError&#39;);
				}
			} else {
				document.fireEvent(&quot;on&quot; + event.eventType, event);
			}
		}
	}
	
	iSubmit.addEventListener(&quot;test&quot;, function(e) { console.log(e); }, false);
	

	//This call is added to have a complete test. The errors are already triggered with the line before this one.

	iSubmit.test();


This will return an error: `Failed to add eventlisterens: TypeError: &#39;addEventListener&#39; called on an object that does not implement interface EventTarget.&quot;`

Now this code will be used in a phonegap app and when I do, it is working on android/ios. During testing, however, it would be nice if I could get it to work in at least a single browser.

PS&gt; I know I could enable bubbling and then listen to the document root, but I would like to have just a little bit OOP where each object can work on its own.


  [1]: http://jsfiddle.net/9d7nN/

addEventListener on custom object

It doesn&#39;t give an error, and I put a `console.log(&#39;loaded userscript wifi-autologin&#39;)`, the `console.log` works, but the intended effect of the document.addEventListener doesn&#39;t happen. After doing a bit more debugging, making it print that the addEventListener was called, I discovered that it wasn&#39;t being called.

Source of script:


    // ==UserScript==
    // @name        wifi-autologin
    // @namespace   lf-ns
    // @description Hopefully autologins to a captive portal
    // @include     *://1.1.1.1/*
    // @version     1
    // @run-at document-end
    // ==/UserScript==
    
    document.addEventListener(&#39;load&#39;, submitAction);

Why doesn&#39;t document.addEventListener(&#39;load&#39;, function) work in a greasemonkey script?

Is there anyway to remove an event listener added like this:

    element.addEventListener(event, function(){/* do work here */}, false);

Without replacing the element?

Removing an anonymous event listener

I&#39;m making use of `matchMedia().addListener` to detect dark/light mode theme preference changes in Safari, however in WebStorm using `addListener` is marked as deprecated but simply says to refer to documentation for what should replace it.

I&#39;ve had a read through the MDN docs and I don&#39;t understand what event type I should be listening for in `addEventListener` to replace `addListener`?

```js
window.matchMedia(&quot;(prefers-color-scheme: dark)&quot;).addListener(() =&gt; this.checkNative());
window.matchMedia(&quot;(prefers-color-scheme: light)&quot;).addListener(() =&gt; this.checkNative());
```

matchMedia().addListener marked as deprecated, addEventListener equivalent?

How can I bind an event listener in rendered elements in Angular 2?

I am using Dragula drag and drop library. It creates dynamic HTML but my event is not bound to dynamic HTML elements.


All Addeventlistener Solutions on Gang of Coders

Total of 25 Addeventlistener Solutions