将事件和参数都传递给 JavaScript 中的 onchange 绑定函数

Question

在 JavaScript 中，我试图设置一个接受参数的 onchange 回调。但是，我目前的做法会覆盖所创建的事件对象。实际上，我的目的并不需要该事件，但我想知道如何捕获事件和任何传入的参数，以防我的需求发生变化。

编辑：为清楚起见，这个 onchange 事件既可以通过编程方式调用，也可以由用户调用。可能有一个实例，我正在创建一个空的选择元素，以便用户可以选择他们想要的内容，或者基于其他交互创建一个填充的元素。

编辑：另外，下面是一个更大的代码库的简化示例。假设范围不是任何变量的全局。我真的在寻找如何专门捕获事件对象（通过用户交互调用时）和另一个对象（通过代码调用时）的答案。感觉好像让 atr 参数在不同的上下文中表示不同的东西是 hacky - 但我更多来自强类型背景，所以它可能只是我。

function update(atr) {
    ...
}

document.getElementById("myelement").onchange = update;

var atr = {"id":1,"param":"val1"};

// This gives me atr in the function as defined above
document.getElementById("myelement").onchange(atr);

// This way, however, gives me atr in the function as the event
document.getElementById("myelement").onchange();

我真正想要的是这样的：

function update(e, atr) {
    // Now I have e as the event and atr as the value I've passed in
}

document.getElementById("myelement").onchange = update;

var atr = {"id":1,"param":"val1"};

// This gives me atr in the function as defined above
document.getElementById("myelement").onchange(atr);

但是上面的代码不起作用。我怀疑我必须对bind() 做点什么，但据我所知，我只是在函数中重写事件的 (this) 对象，就像我现在正在做的那样隐式.

在这个问题Similar Question 中接受的答案基本上是我想做的，但那是使用 React JS，我想在没有任何框架的情况下做到这一点。我一直在尝试搜索多个参数和 onchange 事件，主要是获得 React 或不相关的响应。要么这是一个比我想象的更难的问题，要么我正在以完全错误的方式寻找答案。

Answer 1

我将解释链接答案中发生的情况，因为您提到您想要实现相同的行为。

所以：

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>

此 React 代码将带有一个参数 e 的 匿名 函数附加到字段集作为 onChange 侦听器。这个函数在它的主体中调用另一个函数，传递 e 和附加参数。

把它翻译成你的代码，你想实现这样的目标：

function update(e, attr) {
    // e is instance of Event
    // attr is additional parameter
}
document.getElementById("myelement").onchange((e) => update(e, attr));
// or without ES6 arrow function:
document.getElementById("myelement").onchange(function(e){ update(e, attr); });

另外，请注意附加事件侦听器的正确方法是 addEventListner API。

Answer 2

我不确定我是否完全理解您要执行的操作，但首先您需要区分事件由用户触发的情况和您在调用事件时以编程方式调用事件的情况以编程方式没有事件。

你可以这样做： 您提到您使用 select，逻辑是当 select 发生更改时，将引发事件并获得选定的 value，在您的情况下，该值可以是 atr var 的内容：

HTML

<select id="myelement" onchange="update(event)">
    <option value='{"id":1,"param":"val1"}'>val1
    <option value='{"id":2,"param":"val2"}'>val2
</select>

JavaScript

function update(e) {
    var atr = JSON.parse(document.getElementById("myelement").value);
    //now you have access both to the event and the 'parameter'
}

这涵盖了用户触发事件的情况，当您想以编程方式触发事件时，由于没有事件，请使用带有 atr 参数的不同函数。