将 EventListener 添加到多个元素并返回它们的值

问：

我有一个类别列表：

<ul id="categories">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

我想返回类别 onClick 的值。所以我试着把它们都挑出来，为它们每个人创建一个。但是我不知道如何才能将的值带到回调范围或函数本身之外......addEventListenercat.textContent

async getCategoryNameOnClick() {
    var cats = document.querySelectorAll('#categories li')
    cats.forEach( (cat) => {
        cat.addEventListener('click', () => {
            console.log(cat.textContent)
        })
    })
}

我尝试用承诺解决，但是，在解决之后，它不再起作用了。既不使用var

JavaScript ECMASCRIPT-6 回调闭包 addeventlistener

由于多种原因，您无法返回该值：该事件发生在将来的某个时间点，而不是在调用函数时发生。该事件将发生多次，但函数只能返回一次。你可以用承诺解决第一个问题，但即使是承诺也只能解决一次，所以它不会获得未来的点击。那么，您究竟希望如何处理点击事件呢？最简单的解决方案是传递回调并让事件处理程序调用回调。或者，您可以使用类似 rxjs.dev 的东西作为更高级别的抽象。

答：

1赞 FatherProgramer2020 9/8/2021 #1

好的，首先，你把它放在一个不调用的函数中，并把它变成一个异步函数，不需要打开，其次，你没有在没有锚点或按钮标签的情况下使列表能够点击。所以这是我想出的，它会给你你要求的东西。

    <ul id="categories" >
  <li><button>aaa</button></li>
    <li><button>bbb</button></li>
    <li><button>ccc</button></li>
</ul>

let cats = document.querySelectorAll('#categories li');

cats.forEach( (cat) => {
       cat.addEventListener('click', () => {
             console.log(cat.textContent)
         })
});

我把它们放在按钮中，但你也可以使用锚标签。

据我所知，将事件侦听器添加到 DOM 中的元素不需要元素。您的回复没有回答如何获取回调的外部信息。并且不能解决多次单击它并使其返回并正常工作的问题。不会调用该函数，因为它是整个类的摘录。但这是说明问题的唯一必要部分。buttonacat.textContent

0赞 Abinesh Amatya 9/8/2021 #2

检查捕获所选 li 文本的按钮单击逻辑。希望这能回答你的问题。

var categoresBtn = document.querySelector("button");
var dropdownOptionsContainer = document.querySelector(".options-container");
var categoriesOption = document.querySelectorAll(".option a");

categoresBtn.addEventListener("click", function(e) {
  e.preventDefault()
  dropdownOptionsContainer.classList.toggle("open")
});

//logic to catch the clicked li tag
var clickFn = function(e) {
  console.log("Selected <li>: ", e.target.innerText);
  e.preventDefault()
  dropdownOptionsContainer.classList.remove("open");
  categoresBtn.innerHTML = this.text;
  var activeLink = document.querySelector(".option .active");

  if (activeLink) {
    activeLink.classList.remove("active");
  }
  this.classList.add("active");
}

for (var i = 0; i < categoriesOption.length; i++) {
  categoriesOption[i].addEventListener("mousedown", clickFn, false);
}

.dropdown-container {
  max-width: 500px;
  margin-top: 10px;
  margin-left: 0px;
}

.dropdown-container button {
  position: relative;
  background: none;
  border: none;
  outline: none;
  font-size: 16px;
  border-bottom: 2px solid #9b9b9b;
  padding-bottom: 8px;
  min-width: 150px;
  text-align: left;
  outline: none;
  cursor: pointer;
  z-index: 2;
}

.dropdown-container button:after {
  content: '▾';
  position: absolute;
  right: 0px;
  top: 0%;
  color: rgb(142, 142, 142);
}

.dropdown-container .dropdown-wrap {
  position: relative;
}

.dropdown-container .dropdown-wrap .options-container {
  list-style: none;
  margin: 0;
  padding: 0;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transform: scale(0.8) translate3d(-20px, 0px, 0);
  transform: scale(0.8) translate3d(-20px, 0px, 0);
  -webkit-transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  transition: opacity 0.1s cubic-bezier(0.5, 2, 0.5, 0.75), transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75), -webkit-transform 0.3s cubic-bezier(0.5, 2, 0.5, 0.75);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  z-index: 1;
}

.dropdown-container .dropdown-wrap .options-container.open {
  opacity: 1;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
  transform: scale(1) translate3d(0, 0, 0);
  z-index: 5;
}

.dropdown-container .dropdown-wrap .options-container li {
  display: inline-block;
}

.dropdown-container .dropdown-wrap .options-container li a {
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
  color: #2975DA;
}

.dropdown-container .dropdown-wrap .options-container li a:hover {
  color: #2269c7;
}

.dropdown-container .dropdown-wrap .options-container li a.active {
  border-bottom: 2px solid #9b9b9b;
  color: #9b9b9b;
}

.dropdown-container .dropdown-wrap .options-container li a.active:hover {
  color: #9b9b9b;
}

<div class="dropdown-container">
  <div class="dropdown-wrap">
    <button>Categories</button>
    <ul id="categoriesDDl" class="options-container">
      <li class="option">
        <a href="#">aaa</a>
      </li>
      <li class="option">
        <a href="#">bbb</a>
      </li>
      <li class="option">
        <a href="#">ccc</a>
      </li>
    </ul>
  </div>
</div>

嗯。。这个答案添加了不必要的 CSS 和 HTML 标记。不过，这是一个非常有创意的答案。但是忽略所有这些，基本上您所做的是使用回调函数，并获取 .因此，您可以在回调中检索单击元素的值（与我所做的相同），但不能从回调中提取它以供在其他任何地方进一步使用。这就是我所要求的。我认为在这种情况下，使用与否没有区别。innerTexte.preventDefault()

上一个：尝试使用记忆对象来检查参数是否已经计算...似乎无法处理使用对象作为参数

下一个：如何将引用参数传递给盒装闭包？

将 EventListener 添加到多个元素并返回它们的值 - 如何？

AddEventListener to multiple elements and return their values - How?

评论

评论

评论