文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过单个处理程序函数处理来自不同按钮的DOM事件？

问如何通过单个处理程序函数处理来自不同按钮的DOM事件？
EN

Stack Overflow用户

提问于 2020-12-19 23:46:33

回答 4查看 125关注 0票数 2

我不确定是否可能，但我想使用一个唯一的函数来触发4个不同的按钮来计数一个值(+和-)。但是有四个不同的跨度值，例如，如果我触发森林，它只会从森林中添加或移除，如果我这样做，它只会触发城镇，等等。

// set inital value to zero
let count = 0;
// select value and buttons
const valueForest = document.querySelector("#valueForest");
const btns = document.querySelectorAll(".btn");

btns.forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    const styles = e.currentTarget.classList;
    if (styles.contains("decrease")) {
      count--;
    } else if (styles.contains("increase")) {
      count++;
    } else {
      count = 0;
    }

    if (count > 0) {
      valueForest.style.color = "green";
    }
    if (count < 0) {
      valueForest.style.color = "red";
    }
    if (count === 0) {
      valueForest.style.color = "#222";
    }
    valueForest.textContent = count;
  });
 });

<div class="scoreDiv">
  <h3>Input below the quantity of each tile in the end of the game:</h3>
  <div class="scoreItem">
      <h4>Forest</h4>
      <button class="btn decrease">-</button>
      <span class="value" id="valueForest">0</span>
      <button class="btn increase">+</button>
      <h4>SOMA</h4>
  </div>
  <div class="scoreItem">
      <h4>Town</h4>
      <button class="btn decrease">-</button>
      <span class="value" id="valueTown">0</span>
      <button class="btn increase">+</button>
      <h4>SOMA</h4>
  </div>
  <div class="scoreItem">
      <h4>Production</h4>
      <button class="btn decrease">-</button>
      <span class="value" id="valueProduction">0</span>
      <button class="btn increase">+</button>
      <h4>SOMA</h4>
  </div>
  <div class="scoreItem">
      <h4>Factory</h4>
      <button class="btn decrease">-</button>
      <span class="value" id="valueFactory">0</span>
      <button class="btn increase">+</button>
      <h4>SOMA</h4>
  </div>
</div>

javascript

event-handling

dom-events

event-delegation

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-12-20 00:18:04

是的，有活动授权

这条路：

const scoreDiv = document.querySelector('div.scoreDiv') // the parent Div

scoreDiv.onclick = e => // get all clicks everywhere upon this parent Div
  {
  if (!e.target.matches('div.scoreItem > button.btn ')) return  // ignore other clicks

  let countEl =  e.target.closest('div.scoreItem').querySelector('span.value')
    , newVal  = +countEl.textContent + (e.target.matches('.decrease') ? -1 : +1)
    ;
  countEl.style.color = (newVal > 0) ? 'green' :  (newVal < 0) ? 'red' : '#222'
  countEl.textContent = newVal;
  }

span.value {
  display       : inline-block; 
  width         : 5em; 
  text-align    : right; 
  padding-right : .5em;
  font-weight   : bold;
}

<div class="scoreDiv">
  <h3>Input below the quantity of each tile in the end of the game:</h3>
  <div class="scoreItem">
    <h4>Forest</h4>
    <button class="btn decrease">-</button>
    <span class="value" id="valueForest">0</span>
    <button class="btn increase">+</button>
    <h4>SOMA</h4>
</div>
  <div class="scoreItem">
    <h4>Town</h4>
    <button class="btn decrease">-</button>
    <span class="value" id="valueTown">0</span>
    <button class="btn increase">+</button>
    <h4>SOMA</h4>
  </div>
  <div class="scoreItem">
    <h4>Production</h4>
    <button class="btn decrease">-</button>
    <span class="value" id="valueProduction">0</span>
    <button class="btn increase">+</button>
    <h4>SOMA</h4>
  </div>
  <div class="scoreItem">
    <h4>Factory</h4>
    <button class="btn decrease">-</button>
    <span class="value" id="valueFactory">0</span>
    <button class="btn increase">+</button>
    <h4>SOMA</h4>
  </div>
</div>

解说

if (!e.target.matches('div.scoreItem > button.btn')) return

首先，事件处理程序scoreDiv.onclick = e =>涉及到内部的一切

<div class="scoreDiv"> 
  // everything inside
</div>

所以这个get在这个空间中的点击事件是由这个箭头函数处理的。

它可以是点击：

关于H3元素

，或其中一个span元素。

，或任何H4元素

一切！

甚至任何元素之间的空格。

事件e具有不同的性质

e.currentTarget ->是对调用方元素的引用(这里是scoreDiv div.scoreItem) e.target ->是对发生单击的元素的引用

对于此作业，我们只需执行增量/减量操作。

这意味着我们必须忽略任何点击事件，而不是在正负按钮上。

这个8按钮是：<button class="btn decrease">-</button>或<button class="btn increase">-</button>

所有这些按钮都对应于CSS = div.scoreItem > button.btn

在javascript中，用于测试的代码是

e.target.matches('div.scoreItem > button.btn')

将返回一个布尔值值(真或假)

现在有一个策略:而不是做一个大的

if ( e.target.matches('div.scoreItem > button.btn') ) 
  { 
  //...
  // with many lines of code 
  //until the closing 
  }
// and then quit the function

因为这是一个函数，所以我们使用一个逻辑不(!)

要从函数中直接生成return，编码如下：

if (!e.target.matches('div.scoreItem > button.btn')) return

主要的兴趣是在另一个元素(出现在scoreDiv中)有自己的单击eventHandler时，快速释放事件管理器。

票数 2

Stack Overflow用户

发布于 2020-12-20 03:19:47

由于在先生Jojo的基方法中没有什么可添加的，所以我将重点介绍一种方法，它可以查看和处理反复使用的DOM结构，这些DOM结构将一个特定的行为作为组件来处理。

至于OP的例子，只有一个评分项组件，它只实现它的特定行为一次，并且独立于底层HTML/CSS的语义。

与这样的分数项目组件实际能够做到的相比，已实现/使用的JavaScript代码的数量仍然足够少。

标识组件结构依赖于data属性，这些属性将此任务与所提供的HTML代码/环境分离。

每个组件在初始化/创建时封装其状态；因此，它不从DOM读取数据(只对后者进行写入)，而是从/将数据写入其封装状态。

还可以通过组件特定的data属性为最初显示的值以及不同的增量/递减值配置组件。

正值、负值或零值的颜色模式由组件特定和基于data属性的CSS规则描述；没有理由使用与布局相关的脚本开销.

function incrementBoundItemScore() {
  const { outputControl: ctrl, currentValue, incrementValue } = this;
  ctrl.textContent = ctrl.dataset.currentValue = this.currentValue = (currentValue + incrementValue);
}
function decrementBoundItemScore() {
  const { outputControl: ctrl, currentValue, decrementValue } = this;
  ctrl.textContent = ctrl.dataset.currentValue = this.currentValue = (currentValue + decrementValue);
}

function initializeScoreItem(rootNode) {
  const incrementControl = rootNode.querySelector('[data-increase]');
  const decrementControl = rootNode.querySelector('[data-decrease]');
  const outputControl = rootNode.querySelector('[data-output]');

  const incrementValue = parseFloat(incrementControl.dataset.value, 10);
  const decrementValue = parseFloat(decrementControl.dataset.value, 10);
  const initialValue = parseFloat(outputControl.dataset.initialValue, 10);

  const scoreItem = {
    outputControl,
    currentValue: initialValue,
    incrementValue,
    decrementValue,
  }
  outputControl.textContent = outputControl.dataset.currentValue = initialValue;

  incrementControl
    .addEventListener('click', incrementBoundItemScore.bind(scoreItem));
  decrementControl
    .addEventListener('click', decrementBoundItemScore.bind(scoreItem));
}
function initialize() {
  document
    .querySelectorAll('[data-score-item-component]')
    .forEach(initializeScoreItem);
}
initialize();

body {
  zoom: .8;
  margin: 0;
}
ul, li {
  list-style: none;
}
ul {
  margin: 0;
}
fieldset {
  padding: 0px 10px;
}
.score-group {
  margin: 4px 0;
}
.score-item {
  margin: 0 0 5px 0;
}
.score-item legend {
  font-weight: bold;
}
.score-item strong {
  position: relative;
  top: -2px;
  font-weight: normal;
  font-size: small;
  text-transform: uppercase
}

[data-output][data-current-value] {
  display: inline-block;
  width: 3em;
  text-align: center;
  font-weight: bold;
  color: green;
}
[data-output][data-current-value="0"] {
  color: #222;
}
[data-output][data-current-value^="-"] {
  color: red;
}

<section class="score-board">
  <!--
  <h3>Input below the quantity of each tile in the end of the game:</h3>
  //-->
  <ul>
    <li class="score-item">
      <fieldset  data-score-item-component>
        <legend>Forest</legend>

        <div class="score-group">
          <button
            type="button"
            data-decrease
            data-value='-1'
            class="btn decrease"
          >-</button>
          <output
            name="forest-score"
            data-output
            data-initial-value="9"
          ></output>
          <button
            type="button"
            data-increase
            data-value='1'
            class="btn increase"
          >+</button>
        </div>

        <strong>Soma</strong>
      </fieldset>
    </li>
    <li class="score-item">
      <fieldset data-score-item-component>
        <legend>Town</legend>

        <div class="score-group">
          <button
            type="button"
            data-decrease
            data-value='-2'
            class="btn decrease"
          >-</button>
          <output
            name="town-score"
            data-output
            data-initial-value="0"
          ></output>
          <button
            type="button"
            data-increase
            data-value='2'
            class="btn increase"
          >+</button>
       </div>

        <strong>Soma</strong>
      </fieldset>
    </li>
    <li class="score-item">
      <fieldset data-score-item-component>
        <legend>Production</legend>

        <div class="score-group">
          <button
            type="button"
            data-decrease
            data-value='-5'
            class="btn decrease"
          >-</button>
          <output
            name="production-score"
            data-output
            data-initial-value="-10"
          ></output>
          <button
            type="button"
            data-increase
            data-value='5'
            class="btn increase"
          >+</button>
        </div>

        <strong>Soma</strong>
      </fieldset>
    </li>
    <li class="score-item">
      <fieldset data-score-item-component>
        <legend>Factory</legend>

        <div class="score-group">
          <button
            type="button"
            data-decrease
            data-value='-2'
            class="btn decrease"
          >-</button>
          <output
            name="factory-score"
            data-output
            data-initial-value="-5"
          ></output>
          <button
            type="button"
            data-increase
            data-value='1'
            class="btn increase"
          >+</button>
        </div>

        <strong>Soma</strong>
      </fieldset>
    </li>
  </ul>
</section>

票数 3

Stack Overflow用户

发布于 2020-12-20 14:49:23

我查看了如何通过css直接更改颜色，幸运的是，Peter 展示了这一点。

我还在css中添加了一个output::before {content: attr(data-value)}，允许在没有JS代码的情况下直接将该值属性在显示上。

这进一步简化了javascript代码。

(我还冒昧地改变了界面，使其完全减轻，这对本演示没有任何意义)

const scoreBoard = document.querySelector('#score-board')

scoreBoard.onclick = e =>
  {
  if (!e.target.matches('#score-board button')) return

  let countEl = e.target.closest('fieldset')
                        .querySelector('output[data-value]')
  countEl.dataset.value = +countEl.dataset.value
                        + (+e.target.dataset.increase)
  }

body, textarea, input  {
  font-family : Helvetica, Arial sans-serif;
  font-size   : 12px;
  }
#score-board fieldset {
  width  : 20em;
  margin : .5em 1em;
  }
#score-board legend {
  font-size : 1.4em;
  padding   : 0 .7em;
  }
#score-board output {
  display       : inline-block; 
  font-size     : 1.4em;
  width         : 5em; 
  text-align    : right; 
  padding-right : .5em;
  color         : green;
  font-weight   : bold;
  border-bottom : 1px solid grey;
  margin        : 0 .8em 0 .2em;
  }
#score-board output::before {
  content : attr(data-value)
  }
#score-board output[data-value="0"] {
  color: #222;
  }
#score-board output[data-value^="-"] {
  color: red;
  }

<section id="score-board">
  <fieldset>
    <legend>Forest</legend>
    <output data-value="-10"></output>
    <button data-increase="+1">&#69717;</button>
    <button data-increase="-1">&#69714;</button>
  </fieldset>
  <fieldset>
    <legend>Town</legend>
    <output data-value="0"></output>
    <button data-increase="+1">&#69717;</button>
    <button data-increase="-1">&#69714;</button>
  </fieldset>
  <fieldset>
    <legend>Production</legend>
    <output data-value="-7"></output>
    <button data-increase="+1">&#69717;</button>
    <button data-increase="-1">&#69714;</button>
  </fieldset>
  <fieldset>
    <legend>Factory</legend>
    <output data-value="5"></output>
    <button data-increase="+1">&#69717;</button>
    <button data-increase="-1">&#69714;</button>
  </fieldset>
</section>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65375594

复制

相似问题

问如何通过单个处理程序函数处理来自不同按钮的DOM事件？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过单个处理程序函数处理来自不同按钮的DOM事件？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过单个处理程序函数处理来自不同按钮的DOM事件？
EN