单击的 <button> 的返回值是多少？

Question

我想得到一个点击按钮的返回值，然后用它来做一个if 语句。我在这里读到的关于人们尝试这样做的所有答案要么是非常古老的使用不再起作用的旧脚本，要么是不同的情况。

function remove() {
  if (document.getElementById("removing").value == true) {

    document.getElementById("test").style.backgroundColor = "red";
  }
}

<div id="test">test</div>
<button id="removing" onclick="remove()">Remove a word</button>

我尝试过使用value 和onclick 属性，但是当单击按钮时，它们都不等于true。

我尝试使用alert 显示value，但它什么也没显示。

点击按钮是否真的返回一个值，如果是，它是什么？

Answer 1

DOM Events 由 EventListener 的 callback function 处理。

因此，这样的处理函数，如果由事件触发并由事件侦听器的 handleEvent 方法转发，将始终使用事件对象作为此函数的单个参数来调用。

与此事件相关的所有信息均由事件本身携带。它的属性可以读取，有些甚至可以写入/更改。

从提供的示例中可以明显看出，OP 希望确保事件处理程序仅由特定的 html 元素触发。因此，任何有效的方法只需要查看事件的currentTarget 属性...

// the way the OP might want to handle the problem.
function handleRemoveWord(evt) {
  const elmNode = evt.currentTarget;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node properties.
  if (
    (elmNode.tagName.toUpperCase() === 'BUTTON')
    && (elmNode.id === 'remove')
  ) {
    document
      .getElementById('test')
      .style.backgroundColor = 'red';
  }
}

// another way the OP might want to handle the problem.
function handleRemoveAnotherWord(evt) {

  // `this` referres to the element which got
  // bound to the handler via `addEventListener`.
  const targetNode = this;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node references.
  if (targetNode === evt.currentTarget) {
    document
      .getElementById('test')
      .style.backgroundColor = 'cyan';
  }
}

// an alternative way of solving the problem
// of always being assured about the correct
// element having triggering the event handling.
function handleRestoreWordWithBoundContext(evt) {
  const context = this;
  const { elmTest, elmRestore } = context;

  // make sure the handler was
  // triggered by the intended element ...
  // ... here by comparing node references.
  if (elmRestore === evt.currentTarget) {

    elmTest.style.backgroundColor = '';
  }
}


function initialize() {
  // the way(s) the OP might want to handle the problem.
  document
    .getElementById('remove')
    .addEventListener('click', handleRemoveWord);

  document
    .querySelector('#removeAnother')
    .addEventListener('click', handleRemoveAnotherWord);

  // an alternative way of soving the problem
  // of always being assured about the correct
  // element having triggering the event handling.
  const elmTest = document.querySelector('#test');
  const elmRestore = document.querySelector('#restore');

  elmRestore.addEventListener(
    'click',
    handleRestoreWordWithBoundContext.bind({
      elmTest, 
      elmRestore,
    })
  );
}
initialize();

<div id="test">test</div>

<button id="remove">Remove a word</button>
<button id="removeAnother">Remove another word</button>
<button id="restore">Restore a word</button>

您可能已经注意到，该示例具有第三个按钮，该按钮具有另一种实现事件处理程序的方式。此附加处理程序假定其this 上下文来携带附加信息。这可以通过在此处理程序函数上调用bind 并准确提供希望作为事件处理程序this 上下文出现的信息来实现。每次调用此函数特定方法时，它都会创建另一个函数，该函数确实可以通过 this 关键字访问绑定信息。

Answer 2

只需将按钮的背景颜色更改为：

function remove() {
  document.getElementById("test").style.backgroundColor = "red";
}

<div id="test">test</div>
<button id="removing" onclick="remove()">Remove a word</button>

Answer 3

调度 Javascript 事件处理程序总是返回 true，即使它返回 false，我们都知道这是用于防止事件的默认行为。我们通常不使用事件处理程序的返回值，甚至不返回任何东西。

在您的情况下，我认为您正在尝试访问 currentTarget 元素的值（在您的情况下是“删除”按钮）。为此，您可以使用事件对象，该对象作为参数传递给您的事件处理程序。

event.currentTarget 是一种引用正在调度（触发）事件的元素的方式。就像在事件处理程序中使用“this”一样，除了它也适用于箭头函数。

所以做这样的事情：

function remove(event) {
  let button = event.currentTarget;
  if (buttton.value) {
   document.getElementById("test").style.backgroundColor ="red";
  }
}

在 HTML 中，

<div id="test">test</div>
<button id="removing" onclick="remove(event)">Remove a word</button>

注意我使用了 remove(event)。

根据以下评论编辑： 使用 onclick 将要求您创建一个全局“删除”功能。 如果你这样做，'...onclick="remove(event)" 它基本上做的是创建下面的函数，基本上是一个包装器：

// In the global scope
[reference element].onclick = ()  => {
  remove(event);
}

所以你必须有一个全局的“删除”功能。所以这在模块中不起作用，因为每个模块都有自己的顶级范围。如果您打算从事复杂的项目，您将不得不使用模块。

注意在 html 中使用内联 'onclick' 属性对来自下面评论的大量请求有以下缺点：

-关注点分离：您通常不希望将您的 UI 逻辑（单击按钮时发生的事情）与演示相混淆。您需要在内容、样式和脚本之间进行明确划分。

-使用 onclick 只能分配一个处理程序。

-如果内联指定事件，则将 JS 指定为字符串（属性值始终为字符串）并在事件触发时进行评估。（内部构建额外的包装代码）。

-正如我之前提到的，您必须引用命名函数。这并不理想，并且对需要全局的函数有影响，当您使用模块时，这会真正让您反胃。

简而言之，通过专用的 addEventListener API 集中处理事件。