Question

如果我有带事件侦听器的 init 函数，什么有内部链接到 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();

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

Answer 1

以下是传递值的方法：

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。

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

如果您想在运行时更改回调逻辑。最好在这里使用闭包。我已将所有处理程序逻辑封装在一个函数中，该函数将在这里更接近。点击处理程序本身正在调用由变量 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>

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

3 个答案: