Скопируйте функцию «изменить» EventListener - PullRequest
Новая
       21

Скопируйте функцию «изменить» EventListener

0 голосов
/ 04 января 2019

У меня есть этот тег HTML 

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

который имеет прослушиватель событий 

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

Я хотел бы скопировать функцию в прослушиватель, но все следующие строки возвращают ноль или неопределенное значение 

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

Как мне скопировать анонимную функцию из прослушивателя?

Ответы [ 2 ]

0 голосов
/ 04 января 2019

В качестве альтернативы вы можете вызвать событие исходного объекта с помощью dispatchEvent().Но обратите внимание, что если функция использует ссылку this, она будет ссылаться на оригинальный элемент, к которому прикреплено событие.То же самое верно, если используется параметр event (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>

Другой альтернативой является перезапись стандартной функции addEventListener(), чтобы она сохраняла ссылку на данную функцию.Это пример этого.Вероятно, вы хотите сохранить ссылку другим способом, но в качестве примера вам это не мешало.

Необходимо только убедиться, что функция перезаписана перед созданием элемента. 

//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>

Если вы хотите сделать это для объекта окна, вам, вероятно, нужно перезаписать window.addEventListener, потому что окно не является Node

0 голосов
/ 04 января 2019

Вы не можете.

Вы не сохранили ссылку на нее, и нет API, который мог бы вытащить ее из списка слушателей.

Измените ваш код, чтобы сохранить ссылку на него с самого начала. 

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