Vanilla Javascript 如何覆盖事件侦听器上添加的功能？答案

【问题标题】：Vanilla Javascript how override added function on event listener?Vanilla Javascript 如何覆盖事件侦听器上添加的功能？
【发布时间】：2021-08-27 09:42:36
【问题描述】：

我有一个引导模式，它有一些自定义事件，比如 hidden.bs.modal，取决于用户在哪里做，我希望这个事件中的函数被替换，也许用一个简单的例子来理解会更好，考虑：

const currentModal; // imagine an any modal here.

window.addEventListener('load', () => {
   currentModal.addEventListener('hidden.bs.modal', standardFunction );
});

function standardFunction(){
    alert('hi there');
   // this is standard output to modal closed
}

function buttonClickedChange(){
    // Here, i need override standardFunction

     this.standardFunction = function(){
         alert('modal event hidden.bs.modal changed with success!');
         // this must be override previous output
     };
}

无论函数的重新声明如何，方法的输出仍然是标准的，这是因为事件监听器不引用存储的函数，而只是“复制”其内容并仅在内部创建其范围。

【问题讨论】：

标签： javascript dom dom-events

【解决方案1】：

您遇到的问题是当您绑定事件时，您正在引用该函数。当您替换它时，它不会更新对该函数的引用。您可以清楚地看到这不适用于示例

var btn = document.querySelector("button");
function myFunc () {
  console.log(1);
}

btn.addEventListener("click", myFunc);

myFunc = function() {
  console.log(2);
}

&lt;button&gt;Click Will Show 1&lt;/button&gt;

只需移除事件监听器并绑定一个新事件。

currentModal.removeEventListener('hidden.bs.modal', standardFunction );
currentModal.addEventListener('hidden.bs.modal', myUpdatedFunction );

function myFunc () {
  console.log(1);
}


var btn = document.querySelector("button");
btn.addEventListener("click", myFunc);


function myFunc2() {
  console.log(2);
}

btn.removeEventListener("click", myFunc);
btn.addEventListener("click", myFunc2);

&lt;button&gt;Click&lt;/button&gt;

如果由于某种原因您无法删除事件，唯一的解决方法是不直接绑定到函数，而是让另一个函数调用该函数。

var btn = document.querySelector("button");

var myFunc = function() {
  console.log(1);
}

function clickFunction () {
  myFunc();
}

btn.addEventListener("click", clickFunction);

myFunc = function() {
  console.log(2);
}

&lt;button&gt;Click&lt;/button&gt;

或者大多数人会怎么做就是在函数中添加关于做什么的逻辑

var btn = document.querySelector("button");
var state = 0;

var myFunc = function() {
  if (state===0) {
    console.log(1);
  } else {
    console.log(2);
  }
}


state = 1;

btn.addEventListener("click", myFunc);

&lt;button&gt;Click&lt;/button&gt;

【讨论】：

我来做最常见的，就是switch，我只是以为事件监听器直接引用了传递的属性，会根据它的变化而变化，但我明白了参数传递后是静态的。谢谢！

【解决方案2】：

您使用了函数表达式而不是函数声明。当您使用 function yourFunction 时，它会与所有其他声明的函数一起移动到顶部。当您使用var yourFunction = function () 时，它就在您声明它的地方。这意味着hidden.bs.modal 正在搜索具有该名称的最顶层函数，在本例中是您声明的第一个函数或标准函数。其中一种方法是您可以在全局范围内声明您的函数：function standardFunctionOverride() 并将其添加到侦听器。

【讨论】：