如何将道具传递给链接函数？

Question

如果我有带有事件侦听器的初始化函数，那么有什么内部链接可以通过 console.log() 起作用。问题是，我需要将道具传递给这个函数。我怎么能做到这一点。在我写的这个例子中，我只能传递 $event，但仅此而已:(

let link = (e, val, tas) => {
  console.log(e, val, tas);
}

function init_ovs() {
  let s = document.querySelector("#d1");

  let val = 1;
  let tas = 2;
  
  s.removeEventListener("click", link);
  s.addEventListener("click", link);
}

init_ovs();
init_ovs();
init_ovs();
init_ovs();

我可以将 let link() 函数写入 init_ovs，但在这种情况下，如果 init 函数多次调用，removeEventListener 不会删除事件。

Answer 1

如果您想在运行时更改回调逻辑。最好在这里使用闭包。我已将所有处理程序逻辑封装在一个函数中，该函数将在此处作为更接近的工作。点击处理程序本身正在调用变量linkcb 引用的函数。在运行时，您可以将变量更改为指向另一个函数。我只是更改运行时传递的参数。

let link = (e, val, tas) => {
  console.log(e, val, tas);
}

function CreateClickHandler(elem, cb) {
    let linkcb = undefined;
    let isRegistered = false;
    let extraProps = [];
    linkcb = (e)=>{
        cb(e,...extraProps)
    }
    let handler =  (e)=>{
        linkcb(e)
    };
    return {
        bindOrUpdateHandler:  function() {
            extraProps = arguments;
            if (!isRegistered) {
                elem.addEventListener("click", handler);
                isRegistered = true;
            }
        },
        deregister:  ()=> {
            if(isRegistered){
                elem.removeEventListener("click", handler);
                isRegistered = false;
            }
        }
    }
}

let hndlr = CreateClickHandler(document.querySelector("#d1"), link);
function init_ovs() {

  let val = 1;
  let tas = 2;
  hndlr.bindOrUpdateHandler(val+Math.random(), tas+Math.random());
}

<button id="d1">click</button>

Answer 2

如果您想避免使用全局变量，那么以下是一种方法：

在我的版本中，link(val,tas) 返回一个事件处理程序 function(e){...}，其范围内将包含参数 val 和 tas：

const link=(val,tas)=>e=>{
  console.log(e.type, val, tas);
}
document.querySelectorAll("div button").forEach((btn,i)=>
  btn.addEventListener("click",
    link(i+1,btn.textContent))
);

<div>
<button>one</button><br>
<button>two</button><br>
<button>three</button><br>
<button>four</button>
</div>

Answer 3

以下是传递值的方法：

let link = (e, val, tas) => {
    console.log(e, val, tas);       
  e.removeEventListener("click", linker);
}

function linker() {
    let val = 1;
    let tas = 2;

    link(this, val, tas);
}


function init_ovs() {
  let s = document.querySelector("#d1");

  s.addEventListener("click", linker);
}

init_ovs();

<button id="d1">Val</button>

您可以使用once: true 将eventListener 添加一次。