javascript - 函数内的事件监听器存储在变量中

Question

嗯，我的问题的想法有点愚蠢，我知道，但请尝试理解。 我现在的处境是需要实现这样的事情:

var func1 = function(){
    $("#btn1").on("click", function(){
        console.log("From fucntion 1 button 1");
    })
    $("#btn2").on("click", function(){
        console.log("From fucntion 1 button 2");
    })
}
var func2 = function(){
    $("#btn1").on("click", function(){
        console.log("From fucntion 2 button 1");
    })
    $("#btn2").on("click", function(){
        console.log("From fucntion 2 button 2");
    })
}

var fn;
function changefn1(){
    console.log("function change to 1");
    fn = func1;
    fn();
}
function changefn2(){
    console.log("function change to 2");
    fn = func2;
    fn();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="changefn1()">Change function to 1</button>
<button onClick="changefn2()">Change function to 2</button>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

所以，是的，事件监听器工作正常，但是当我单击两个“更改”功能按钮时，两个事件监听器会一起触发。我知道我可以在监听器中添加一些条件，只是说插入条件需要一段时间才能实现。 那么，有没有另一种方法可以正确、正确地做到这一点。 谢谢

Answer 1

您多次添加事件监听器。每次运行其中一个函数时，它都会重新添加事件监听器，从而导致回调触发多次。您可以在使用 jQuery 的 .off() 方法添加单击事件监听器之前删除它们:

var func1 = function() {
  $('button').off('click');
  $("#btn1").on("click", function() {
    console.log("From fucntion 1 button 1");
  })
  $("#btn2").on("click", function() {
    console.log("From fucntion 1 button 2");
  })
}
var func2 = function() {
  $('button').off('click'); // remove any click event listeners on your buttons
  $("#btn1").on("click", function() {
    console.log("From fucntion 2 button 1");
  })
  $("#btn2").on("click", function() {
    console.log("From fucntion 2 button 2");
  })
}

var fn;

function changefn1() {
  console.log("function change to 1");
  fn = func1;
  fn();
}

function changefn2() {
  console.log("function change to 2");
  fn = func2;
  fn();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="changefn1()">Change function to 1</button>
<button onClick="changefn2()">Change function to 2</button>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

一种更简单的方法是仅使用一个事件监听器来处理您的点击，而是使用一个存储回调函数的对象，该函数将根据所选按钮决定应执行哪些代码:

var function_sel = "fn1"; // default function to use
var button_opt = {
  "fn1": function(n) {
    console.log("From function 1 button " +n);
  },
  "fn2": function(n) {
    console.log("From function 2 button " +n);
  }
}

$(".change-btn").click(function() {
  var function_num = $(this).data("fn");
  console.log("function change to " +function_num);
  function_sel = "fn" + function_num;
});

$(".btn").click(function() {
  var button_num = $(this).data("btn");
  button_opt[function_sel](button_num);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="change-btn" data-fn="1">Change function to 1</button>
<button class="change-btn" data-fn="2">Change function to 2</button>
<button class="btn" id="btn1" data-btn="1">Button 1</button>
<button class="btn" id="btn2" data-btn="2">Button 2</button>