从li a单击访问对OnClick事件的引用

Question

这是我第一次考虑将事件移到正常的HTML onClick=””事件之外。

基本上，我正在尝试将与scrollToArtical(#)关联到myElement.onclick中的数字。您将如何重写此事件，以使事件在.js文件中。

我已经尝试了变体以获取该元素，但这些元素不起作用：

var objScrollToNav = document.getElementById("id_ScrollToNav").children;
var objScrollToNav = document.querySelector("#id_ScrollToNav a"); 

任何帮助将不胜感激 - CES我的旧代码是：

<ul id="id_ScrollToNav" role="list">
    <li class="sectionNavOff"><a onclick="scrollToArticle(0)" role="link">•</a></li>
    <li class="sectionNavOn"><a onclick="scrollToArticle(1)" role="link">•</a></li>
    <li class="sectionNavOff"><a onclick="scrollToArticle(2)" role="link">•</a></li>
</ul>

Answer 1

使用 document.querySelectorAll获取类似数组的列表，然后循环循环。要保留对索引的参考，请确保您还将索引传递到新的封闭中（下面的addEvent功能创建了新的封闭）。

function scrollToArticle(index) { console.log("Scrolling to:", index); }
// Select all the elements.
var links = document.querySelectorAll("#id_ScrollToNav a");
// This function adds event listener, and holds a reference to the index.
function addEvent(el, index) {
  el.addEventListener("click", function() {
    scrollToArticle(index);
  });
}
// Loop over the elements.
for (var i = 0; i < links.length; i++) {
  addEvent(links[i], i);
}

<ul id="id_ScrollToNav" role="list">
    <li class="sectionNavOff"><a role="link">•</a></li>
    <li class="sectionNavOn"><a role="link">•</a></li>
    <li class="sectionNavOff"><a role="link">•</a></li>
</ul>

Answer 2

，由于您的li元素可以收集到数组中，并且数组具有索引，因此您实际上不需要将硬编码的数字传递给您的功能。您只需通过单击该功能的li的索引即可。

另外，当不直接在任何地方导航您时，请勿使用<a>元素。这可能会给使用屏幕阅读器的人带来问题。而是直接在li元素上设置click事件并完全消除a元素。

最后，不要使用内联HTML事件属性（onclick）。这就是我们20年前进行活动处理程序的方式，不幸的是，这项技术不会消失。不使用它们的原因。相反，遵循现代标准并将JavaScript与HTML分开。

// Get all the li elements into an array
var items = Array.prototype.slice.call(document.querySelectorAll("#id_ScrollToNav > li"));
// Loop over the list items
items.forEach(function(item, index){
  // Assign each item a click event handler that uses the index of the current item
  item.addEventListener("click", function(){ scrollToArticle(index) });
});
// Just for testing
function scrollToArticle(articleNumber){
 console.log(articleNumber);
}

#id_ScrollToNav > li {
  cursor:pointer;
}

<ul id="id_ScrollToNav" role="list">
  <li class="sectionNavOff" role="link">•</li>
  <li class="sectionNavOn" role="link">•</li>
  <li class="sectionNavOff" role="link">•</li>
</ul>

Answer 3

要添加到上面，使用数据属性将CSS样式与JavaScript分开（含义，HTML类标签应用于HTML/CSS的内容）。

）。

<li data-element="sectionNavOff">
<li data-element="sectionNavOn">

使用数据标签（主要是速度）存在一些小缺点，但是许多企业应用程序和框架（例如Bootstrap）倾向于相信将样式与JavaScript分开的好处完全超过了缺点。如果我知道您是否使用jQuery，我可以给您一个详细的用法示例。