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

在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);

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); });

但是，上面的代码不起作用。我怀疑我必须对

bind（）

执行某些操作，但据我所知，我只是在函数中重写事件的（

this

）对象，就像我现在隐式执行的那样

---

这个问题的公认答案基本上是我想做的，但这是通过React JS实现的，我希望在没有任何框架的情况下实现这一点。我一直在尝试搜索多个参数和onchange事件，主要是得到React或不相关的响应。要么这是一个比我想象的更难的问题，要么我在以完全错误的方式寻找答案

我将解释链接答案中出现的情况，因为您提到您希望实现相同的行为

因此：

---

另外，请注意，连接事件侦听器的正确方法是

我将解释链接答案中出现的情况，因为您提到您希望实现相同的行为

因此：

---

另外，请注意，连接事件侦听器的正确方法是

我不确定我是否完全理解您试图做的事情，但首先您需要区分事件是由用户触发的情况和您以编程方式调用事件的情况，当您以编程方式调用事件时，没有事件

您可以这样做： 您提到使用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>

---

这涵盖了用户触发事件的情况，当您希望以编程方式触发事件时，由于没有事件，请使用另一个函数获取atr参数。

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

您可以这样做： 您提到使用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>

---

这涵盖了用户触发事件的情况，当您希望以编程方式触发事件时，由于没有事件，请使用另一个函数获取atr参数。

您没有覆盖任何内容，因为您手动调用了它，所以没有任何事件。我想这可能会有帮助

var atr={“id”：1，“param”：“val1”}；document.getElementById（“myelement”）.onchange=function（）{console.log（atr）；}

如果这是实际问题的真实表示，则根本不需要将对象传递到函数中，因为它们在同一范围内。@Occam'sRazor-这只是一个简化的说明，实际上它们在不同的范围内。但是很好，你没有重写任何东西，因为你手动调用了它，所以没有任何事件发生。我想这可能会有帮助

var atr={“id”：1，“param”：“val1”}；document.getElementById（“myelement”）.onchange=function（）{console.log（atr）；}

如果这是实际问题的真实表示，则根本不需要将对象传递到函数中，因为它们在同一范围内。@Occam'sRazor-这只是一个简化的说明，实际上它们在不同的范围内。这正是我想要的，而且+1，因为当我看到你的答案时，那是一个“哦，duh”的时刻：）。同样感谢你的链接，我也会阅读你推荐的API。我的猜测是，有一种更好的结构性方法来解决这个问题，尽管这是出于好奇。这正是我所寻找的，而且+1，因为当我看到你的答案时，那是一个“哦，duh”的时刻：）。同样感谢你的链接，我也会阅读你推荐的API。我的猜测是，有一种更好的结构性方法来解决这个问题，尽管这是出于好奇，而不是出于任何原因。对于任何其他在这个问题上遇到障碍的人来说，这也是一个很好的答案。我一直在寻找某种内置方式（类似于python中处理self的方式）来解决这个问题，但JS似乎不是这样工作的+1对于示例代码，我认为它对其他人也很有用。对于其他遇到这个问题的人来说，这也是一个很好的答案。我一直在寻找某种内置方式（类似于python中处理self的方式）来解决这个问题，但JS似乎不是这样工作的+1对于示例代码，我认为它对其他人也很有用。

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