javascript - 点击的返回值是多少?

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

单击按钮是否实际上返回一个值，如果是，它是什么？

标签： javascriptdomeventsevent-handling

Answer 1

DOMEvent由 anEventListener的回调函数处理。

因此，这样的处理函数，如果由事件触发并由事件侦听器的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关键字访问绑定信息。