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中的更改发生时抛出事件并且您获得所选的值，在您的情况下，该值可以是atr var的内容：

<强> HTML

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

<强>的JavaScript

npm run eject

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

将事件和参数传递给JavaScript

2 个答案: