Copy a 'change' EventListener function





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







3















I have this HTML tag



<input type="file" id="File">


which has an event listener



document.getElementById("File").addEventListener("change", function() {alert("test")});


I would like to copy the function in the listener but all the following lines return null or undefined



document.getElementById("File").getAttribute("change")
//null
document.getElementById("File").change
//undefined
document.getElementById("File").getAttribute("onchange")
//null
document.getElementById("File").onchange
//null


How can I copy the anonymous function from the listener?










share|improve this question































    3















    I have this HTML tag



    <input type="file" id="File">


    which has an event listener



    document.getElementById("File").addEventListener("change", function() {alert("test")});


    I would like to copy the function in the listener but all the following lines return null or undefined



    document.getElementById("File").getAttribute("change")
    //null
    document.getElementById("File").change
    //undefined
    document.getElementById("File").getAttribute("onchange")
    //null
    document.getElementById("File").onchange
    //null


    How can I copy the anonymous function from the listener?










    share|improve this question



























      3












      3








      3








      I have this HTML tag



      <input type="file" id="File">


      which has an event listener



      document.getElementById("File").addEventListener("change", function() {alert("test")});


      I would like to copy the function in the listener but all the following lines return null or undefined



      document.getElementById("File").getAttribute("change")
      //null
      document.getElementById("File").change
      //undefined
      document.getElementById("File").getAttribute("onchange")
      //null
      document.getElementById("File").onchange
      //null


      How can I copy the anonymous function from the listener?










      share|improve this question
















      I have this HTML tag



      <input type="file" id="File">


      which has an event listener



      document.getElementById("File").addEventListener("change", function() {alert("test")});


      I would like to copy the function in the listener but all the following lines return null or undefined



      document.getElementById("File").getAttribute("change")
      //null
      document.getElementById("File").change
      //undefined
      document.getElementById("File").getAttribute("onchange")
      //null
      document.getElementById("File").onchange
      //null


      How can I copy the anonymous function from the listener?







      javascript onchange addeventlistener






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 4 at 10:54







      Mehdi Nellen

















      asked Jan 4 at 10:34









      Mehdi NellenMehdi Nellen

      4,69342241




      4,69342241
























          2 Answers
          2






          active

          oldest

          votes


















          3














          You can't.



          You didn't keep a reference to it, and there is no API to pull it out of the list of listeners.



          Refactor your code so you keep a reference to it from the start.



          function myChangeHandler (event) {
          alert("test");
          }
          document.getElementById("File").addEventListener("change", myChangeHandler);





          share|improve this answer
























          • alright, that's annoying. I can't really refactor the code because the event listener gets created by a framework

            – Mehdi Nellen
            Jan 4 at 10:45



















          1














          As an alternative you could trigger the event of the original object with dispatchEvent(). But note, if the function uses this reference it will refer to the original element the event is attached to. Same is true if the event paramter is used (function(event){}).






          document.getElementById("test").addEventListener("change", function() {
          console.log("test");
          console.log("triggered element id: " + this.id);
          });

          document.getElementById("manual").addEventListener("click", function() {
          document.getElementById("test").dispatchEvent(new Event('change'));
          });

          <input id="test">
          <button id="manual">manual</button>





          Another alternative is to overwrite the standard addEventListener() function so it will store a reference to the given function. This is an example of this. You probable want to store the reference in a different way but kept it easy as an example.



          You only have to make sure that the function is overwritten before the element is created.






          //Store the orignal addEventListener() function under a new name so we can still use it.
          Node.prototype.originalAddEventListener = Node.prototype.addEventListener;
          //Create a variable where we store the handler for the #test1 element
          var test1Handler;

          //overwrite the orignal function with our own so it will store a reference to the #test1 event handler in the variable
          Node.prototype.addEventListener = function(e, fn){
          if(this.id === 'test1') {
          test1Handler = fn;
          }
          this.originalAddEventListener(e, fn);
          }

          //Attach event with the overwritten function, lets say this is done by an extarnal libary.
          document.getElementById('test1').addEventListener('change', function(){
          console.log("Changing element id: " + this.id);
          });

          //When the button is clicked the change handler of test1 is copied to test2.
          document.getElementById('exec').addEventListener('click', function(){
          document.getElementById('test2').addEventListener('change', test1Handler);
          });

          <label for="test1">Test 1</label><input id="test1"><br>
          <button id="exec">Add Test 1 change handler to Test 2</button><br>
          <label for="test2">Test 2</label><input id="test2"><br>





          If you want to do this for the window object you probably need to overwrite window.addEventListener because window isn't a Node






          share|improve this answer


























          • great solution, I haven't described my problem completely, I would like to copy the event function to use it elsewhere and then remove the eventlistener. Its probably not possible.

            – Mehdi Nellen
            Jan 4 at 11:04











          • @MehdiNellen Not sure if and how this would work. But perhaps you could overwrite the standard addEventListener() function so it will store a reference to the given function somewhere. Just an out of the box idea. Might be worth to investigate.

            – Mark Baijens
            Jan 4 at 11:15











          • @MehdiNellen Updated my answer with a simple example of my out of the box idea. Hopefully it will help you.

            – Mark Baijens
            Jan 4 at 11:33












          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54037246%2fcopy-a-change-eventlistener-function%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          3














          You can't.



          You didn't keep a reference to it, and there is no API to pull it out of the list of listeners.



          Refactor your code so you keep a reference to it from the start.



          function myChangeHandler (event) {
          alert("test");
          }
          document.getElementById("File").addEventListener("change", myChangeHandler);





          share|improve this answer
























          • alright, that's annoying. I can't really refactor the code because the event listener gets created by a framework

            – Mehdi Nellen
            Jan 4 at 10:45
















          3














          You can't.



          You didn't keep a reference to it, and there is no API to pull it out of the list of listeners.



          Refactor your code so you keep a reference to it from the start.



          function myChangeHandler (event) {
          alert("test");
          }
          document.getElementById("File").addEventListener("change", myChangeHandler);





          share|improve this answer
























          • alright, that's annoying. I can't really refactor the code because the event listener gets created by a framework

            – Mehdi Nellen
            Jan 4 at 10:45














          3












          3








          3







          You can't.



          You didn't keep a reference to it, and there is no API to pull it out of the list of listeners.



          Refactor your code so you keep a reference to it from the start.



          function myChangeHandler (event) {
          alert("test");
          }
          document.getElementById("File").addEventListener("change", myChangeHandler);





          share|improve this answer













          You can't.



          You didn't keep a reference to it, and there is no API to pull it out of the list of listeners.



          Refactor your code so you keep a reference to it from the start.



          function myChangeHandler (event) {
          alert("test");
          }
          document.getElementById("File").addEventListener("change", myChangeHandler);






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jan 4 at 10:37









          QuentinQuentin

          659k748981057




          659k748981057













          • alright, that's annoying. I can't really refactor the code because the event listener gets created by a framework

            – Mehdi Nellen
            Jan 4 at 10:45



















          • alright, that's annoying. I can't really refactor the code because the event listener gets created by a framework

            – Mehdi Nellen
            Jan 4 at 10:45

















          alright, that's annoying. I can't really refactor the code because the event listener gets created by a framework

          – Mehdi Nellen
          Jan 4 at 10:45





          alright, that's annoying. I can't really refactor the code because the event listener gets created by a framework

          – Mehdi Nellen
          Jan 4 at 10:45













          1














          As an alternative you could trigger the event of the original object with dispatchEvent(). But note, if the function uses this reference it will refer to the original element the event is attached to. Same is true if the event paramter is used (function(event){}).






          document.getElementById("test").addEventListener("change", function() {
          console.log("test");
          console.log("triggered element id: " + this.id);
          });

          document.getElementById("manual").addEventListener("click", function() {
          document.getElementById("test").dispatchEvent(new Event('change'));
          });

          <input id="test">
          <button id="manual">manual</button>





          Another alternative is to overwrite the standard addEventListener() function so it will store a reference to the given function. This is an example of this. You probable want to store the reference in a different way but kept it easy as an example.



          You only have to make sure that the function is overwritten before the element is created.






          //Store the orignal addEventListener() function under a new name so we can still use it.
          Node.prototype.originalAddEventListener = Node.prototype.addEventListener;
          //Create a variable where we store the handler for the #test1 element
          var test1Handler;

          //overwrite the orignal function with our own so it will store a reference to the #test1 event handler in the variable
          Node.prototype.addEventListener = function(e, fn){
          if(this.id === 'test1') {
          test1Handler = fn;
          }
          this.originalAddEventListener(e, fn);
          }

          //Attach event with the overwritten function, lets say this is done by an extarnal libary.
          document.getElementById('test1').addEventListener('change', function(){
          console.log("Changing element id: " + this.id);
          });

          //When the button is clicked the change handler of test1 is copied to test2.
          document.getElementById('exec').addEventListener('click', function(){
          document.getElementById('test2').addEventListener('change', test1Handler);
          });

          <label for="test1">Test 1</label><input id="test1"><br>
          <button id="exec">Add Test 1 change handler to Test 2</button><br>
          <label for="test2">Test 2</label><input id="test2"><br>





          If you want to do this for the window object you probably need to overwrite window.addEventListener because window isn't a Node






          share|improve this answer


























          • great solution, I haven't described my problem completely, I would like to copy the event function to use it elsewhere and then remove the eventlistener. Its probably not possible.

            – Mehdi Nellen
            Jan 4 at 11:04











          • @MehdiNellen Not sure if and how this would work. But perhaps you could overwrite the standard addEventListener() function so it will store a reference to the given function somewhere. Just an out of the box idea. Might be worth to investigate.

            – Mark Baijens
            Jan 4 at 11:15











          • @MehdiNellen Updated my answer with a simple example of my out of the box idea. Hopefully it will help you.

            – Mark Baijens
            Jan 4 at 11:33
















          1














          As an alternative you could trigger the event of the original object with dispatchEvent(). But note, if the function uses this reference it will refer to the original element the event is attached to. Same is true if the event paramter is used (function(event){}).






          document.getElementById("test").addEventListener("change", function() {
          console.log("test");
          console.log("triggered element id: " + this.id);
          });

          document.getElementById("manual").addEventListener("click", function() {
          document.getElementById("test").dispatchEvent(new Event('change'));
          });

          <input id="test">
          <button id="manual">manual</button>





          Another alternative is to overwrite the standard addEventListener() function so it will store a reference to the given function. This is an example of this. You probable want to store the reference in a different way but kept it easy as an example.



          You only have to make sure that the function is overwritten before the element is created.






          //Store the orignal addEventListener() function under a new name so we can still use it.
          Node.prototype.originalAddEventListener = Node.prototype.addEventListener;
          //Create a variable where we store the handler for the #test1 element
          var test1Handler;

          //overwrite the orignal function with our own so it will store a reference to the #test1 event handler in the variable
          Node.prototype.addEventListener = function(e, fn){
          if(this.id === 'test1') {
          test1Handler = fn;
          }
          this.originalAddEventListener(e, fn);
          }

          //Attach event with the overwritten function, lets say this is done by an extarnal libary.
          document.getElementById('test1').addEventListener('change', function(){
          console.log("Changing element id: " + this.id);
          });

          //When the button is clicked the change handler of test1 is copied to test2.
          document.getElementById('exec').addEventListener('click', function(){
          document.getElementById('test2').addEventListener('change', test1Handler);
          });

          <label for="test1">Test 1</label><input id="test1"><br>
          <button id="exec">Add Test 1 change handler to Test 2</button><br>
          <label for="test2">Test 2</label><input id="test2"><br>





          If you want to do this for the window object you probably need to overwrite window.addEventListener because window isn't a Node






          share|improve this answer


























          • great solution, I haven't described my problem completely, I would like to copy the event function to use it elsewhere and then remove the eventlistener. Its probably not possible.

            – Mehdi Nellen
            Jan 4 at 11:04











          • @MehdiNellen Not sure if and how this would work. But perhaps you could overwrite the standard addEventListener() function so it will store a reference to the given function somewhere. Just an out of the box idea. Might be worth to investigate.

            – Mark Baijens
            Jan 4 at 11:15











          • @MehdiNellen Updated my answer with a simple example of my out of the box idea. Hopefully it will help you.

            – Mark Baijens
            Jan 4 at 11:33














          1












          1








          1







          As an alternative you could trigger the event of the original object with dispatchEvent(). But note, if the function uses this reference it will refer to the original element the event is attached to. Same is true if the event paramter is used (function(event){}).






          document.getElementById("test").addEventListener("change", function() {
          console.log("test");
          console.log("triggered element id: " + this.id);
          });

          document.getElementById("manual").addEventListener("click", function() {
          document.getElementById("test").dispatchEvent(new Event('change'));
          });

          <input id="test">
          <button id="manual">manual</button>





          Another alternative is to overwrite the standard addEventListener() function so it will store a reference to the given function. This is an example of this. You probable want to store the reference in a different way but kept it easy as an example.



          You only have to make sure that the function is overwritten before the element is created.






          //Store the orignal addEventListener() function under a new name so we can still use it.
          Node.prototype.originalAddEventListener = Node.prototype.addEventListener;
          //Create a variable where we store the handler for the #test1 element
          var test1Handler;

          //overwrite the orignal function with our own so it will store a reference to the #test1 event handler in the variable
          Node.prototype.addEventListener = function(e, fn){
          if(this.id === 'test1') {
          test1Handler = fn;
          }
          this.originalAddEventListener(e, fn);
          }

          //Attach event with the overwritten function, lets say this is done by an extarnal libary.
          document.getElementById('test1').addEventListener('change', function(){
          console.log("Changing element id: " + this.id);
          });

          //When the button is clicked the change handler of test1 is copied to test2.
          document.getElementById('exec').addEventListener('click', function(){
          document.getElementById('test2').addEventListener('change', test1Handler);
          });

          <label for="test1">Test 1</label><input id="test1"><br>
          <button id="exec">Add Test 1 change handler to Test 2</button><br>
          <label for="test2">Test 2</label><input id="test2"><br>





          If you want to do this for the window object you probably need to overwrite window.addEventListener because window isn't a Node






          share|improve this answer















          As an alternative you could trigger the event of the original object with dispatchEvent(). But note, if the function uses this reference it will refer to the original element the event is attached to. Same is true if the event paramter is used (function(event){}).






          document.getElementById("test").addEventListener("change", function() {
          console.log("test");
          console.log("triggered element id: " + this.id);
          });

          document.getElementById("manual").addEventListener("click", function() {
          document.getElementById("test").dispatchEvent(new Event('change'));
          });

          <input id="test">
          <button id="manual">manual</button>





          Another alternative is to overwrite the standard addEventListener() function so it will store a reference to the given function. This is an example of this. You probable want to store the reference in a different way but kept it easy as an example.



          You only have to make sure that the function is overwritten before the element is created.






          //Store the orignal addEventListener() function under a new name so we can still use it.
          Node.prototype.originalAddEventListener = Node.prototype.addEventListener;
          //Create a variable where we store the handler for the #test1 element
          var test1Handler;

          //overwrite the orignal function with our own so it will store a reference to the #test1 event handler in the variable
          Node.prototype.addEventListener = function(e, fn){
          if(this.id === 'test1') {
          test1Handler = fn;
          }
          this.originalAddEventListener(e, fn);
          }

          //Attach event with the overwritten function, lets say this is done by an extarnal libary.
          document.getElementById('test1').addEventListener('change', function(){
          console.log("Changing element id: " + this.id);
          });

          //When the button is clicked the change handler of test1 is copied to test2.
          document.getElementById('exec').addEventListener('click', function(){
          document.getElementById('test2').addEventListener('change', test1Handler);
          });

          <label for="test1">Test 1</label><input id="test1"><br>
          <button id="exec">Add Test 1 change handler to Test 2</button><br>
          <label for="test2">Test 2</label><input id="test2"><br>





          If you want to do this for the window object you probably need to overwrite window.addEventListener because window isn't a Node






          document.getElementById("test").addEventListener("change", function() {
          console.log("test");
          console.log("triggered element id: " + this.id);
          });

          document.getElementById("manual").addEventListener("click", function() {
          document.getElementById("test").dispatchEvent(new Event('change'));
          });

          <input id="test">
          <button id="manual">manual</button>





          document.getElementById("test").addEventListener("change", function() {
          console.log("test");
          console.log("triggered element id: " + this.id);
          });

          document.getElementById("manual").addEventListener("click", function() {
          document.getElementById("test").dispatchEvent(new Event('change'));
          });

          <input id="test">
          <button id="manual">manual</button>





          //Store the orignal addEventListener() function under a new name so we can still use it.
          Node.prototype.originalAddEventListener = Node.prototype.addEventListener;
          //Create a variable where we store the handler for the #test1 element
          var test1Handler;

          //overwrite the orignal function with our own so it will store a reference to the #test1 event handler in the variable
          Node.prototype.addEventListener = function(e, fn){
          if(this.id === 'test1') {
          test1Handler = fn;
          }
          this.originalAddEventListener(e, fn);
          }

          //Attach event with the overwritten function, lets say this is done by an extarnal libary.
          document.getElementById('test1').addEventListener('change', function(){
          console.log("Changing element id: " + this.id);
          });

          //When the button is clicked the change handler of test1 is copied to test2.
          document.getElementById('exec').addEventListener('click', function(){
          document.getElementById('test2').addEventListener('change', test1Handler);
          });

          <label for="test1">Test 1</label><input id="test1"><br>
          <button id="exec">Add Test 1 change handler to Test 2</button><br>
          <label for="test2">Test 2</label><input id="test2"><br>





          //Store the orignal addEventListener() function under a new name so we can still use it.
          Node.prototype.originalAddEventListener = Node.prototype.addEventListener;
          //Create a variable where we store the handler for the #test1 element
          var test1Handler;

          //overwrite the orignal function with our own so it will store a reference to the #test1 event handler in the variable
          Node.prototype.addEventListener = function(e, fn){
          if(this.id === 'test1') {
          test1Handler = fn;
          }
          this.originalAddEventListener(e, fn);
          }

          //Attach event with the overwritten function, lets say this is done by an extarnal libary.
          document.getElementById('test1').addEventListener('change', function(){
          console.log("Changing element id: " + this.id);
          });

          //When the button is clicked the change handler of test1 is copied to test2.
          document.getElementById('exec').addEventListener('click', function(){
          document.getElementById('test2').addEventListener('change', test1Handler);
          });

          <label for="test1">Test 1</label><input id="test1"><br>
          <button id="exec">Add Test 1 change handler to Test 2</button><br>
          <label for="test2">Test 2</label><input id="test2"><br>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 4 at 14:32

























          answered Jan 4 at 10:54









          Mark BaijensMark Baijens

          7,166103554




          7,166103554













          • great solution, I haven't described my problem completely, I would like to copy the event function to use it elsewhere and then remove the eventlistener. Its probably not possible.

            – Mehdi Nellen
            Jan 4 at 11:04











          • @MehdiNellen Not sure if and how this would work. But perhaps you could overwrite the standard addEventListener() function so it will store a reference to the given function somewhere. Just an out of the box idea. Might be worth to investigate.

            – Mark Baijens
            Jan 4 at 11:15











          • @MehdiNellen Updated my answer with a simple example of my out of the box idea. Hopefully it will help you.

            – Mark Baijens
            Jan 4 at 11:33



















          • great solution, I haven't described my problem completely, I would like to copy the event function to use it elsewhere and then remove the eventlistener. Its probably not possible.

            – Mehdi Nellen
            Jan 4 at 11:04











          • @MehdiNellen Not sure if and how this would work. But perhaps you could overwrite the standard addEventListener() function so it will store a reference to the given function somewhere. Just an out of the box idea. Might be worth to investigate.

            – Mark Baijens
            Jan 4 at 11:15











          • @MehdiNellen Updated my answer with a simple example of my out of the box idea. Hopefully it will help you.

            – Mark Baijens
            Jan 4 at 11:33

















          great solution, I haven't described my problem completely, I would like to copy the event function to use it elsewhere and then remove the eventlistener. Its probably not possible.

          – Mehdi Nellen
          Jan 4 at 11:04





          great solution, I haven't described my problem completely, I would like to copy the event function to use it elsewhere and then remove the eventlistener. Its probably not possible.

          – Mehdi Nellen
          Jan 4 at 11:04













          @MehdiNellen Not sure if and how this would work. But perhaps you could overwrite the standard addEventListener() function so it will store a reference to the given function somewhere. Just an out of the box idea. Might be worth to investigate.

          – Mark Baijens
          Jan 4 at 11:15





          @MehdiNellen Not sure if and how this would work. But perhaps you could overwrite the standard addEventListener() function so it will store a reference to the given function somewhere. Just an out of the box idea. Might be worth to investigate.

          – Mark Baijens
          Jan 4 at 11:15













          @MehdiNellen Updated my answer with a simple example of my out of the box idea. Hopefully it will help you.

          – Mark Baijens
          Jan 4 at 11:33





          @MehdiNellen Updated my answer with a simple example of my out of the box idea. Hopefully it will help you.

          – Mark Baijens
          Jan 4 at 11:33


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54037246%2fcopy-a-change-eventlistener-function%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas