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;
}
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
add a comment |
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
add a comment |
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
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
javascript onchange addeventlistener
edited Jan 4 at 10:54
Mehdi Nellen
asked Jan 4 at 10:34
Mehdi NellenMehdi Nellen
4,69342241
4,69342241
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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);
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
add a comment |
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
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 standardaddEventListener()
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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);
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
add a comment |
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);
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
add a comment |
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);
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);
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
add a comment |
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
add a comment |
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
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 standardaddEventListener()
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
add a comment |
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
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 standardaddEventListener()
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
add a comment |
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
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>
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 standardaddEventListener()
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
add a comment |
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 standardaddEventListener()
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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