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

Question

在JavaScript中，我试图设置一个接受参数的onchange回调。 但是，我当前的操作方式会覆盖创建的事件对象。 我实际上并不需要出于我的目的而使用该事件，但是我想知道如何捕获该事件以及任何传入的参数，以防我的需求发生变化。

编辑：为清楚起见，可以通过编程方式和用户调用此onchange事件。 在某些情况下，我正在创建一个空的select元素，以便用户可以选择他们想要的东西，或者根据其他交互来创建一个填充的元素。

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

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 ）对象。

这个问题类似问题的公认答案基本上是我想做的，但这是使用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发生更改时，将引发事件并获得选定的值 ，在这种情况下，该值可以是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参数的其他函数。