单击 <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，但它什么也没显示。

点击按钮实际上 returns 一个值，如果是，它是什么？

Answer 1

调度 Javascript 事件处理程序始终 return 为真，即使它 return 为假，我们都知道它用于防止事件的默认行为。我们通常不使用事件处理程序的 return 值，甚至不使用 return 任何东西。

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

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 需要您创建一个全局 'remove' 函数。如果你这样做，'...onclick="remove(event)" 它基本上做的是创建下面的函数，基本上是一个包装器：

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

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

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

-关注点分离：您通常不想将 UI 逻辑（单击按钮时发生的情况）与表示混淆。您希望内容、样式和脚本之间有明确的区分。

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

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

-正如我之前提到的，您面临着必须引用命名函数的问题。这并不理想，并且对需要全局的功能有影响，这在您使用模块时真的会反咬一口。

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

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

DOM Events are handled by an EventListener's callback function.

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

所有与本次活动相关的信息均由活动本身携带。它的属性可以读取，有的甚至可以written/changed.

从提供的示例中可以明显看出，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 关键字访问绑定信息。

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

What is the returned value of a clicked <button>?

javascript

events

dom

event-handling