少量 JavaScript

Question

如何减少本例中的 JavaScript 代码量？我想要 DRY 代码。

我想知道我需要做什么，以免重复使用 EventListeners。

请在此处找到代码。首先是 JavaScript，然后是 CSS，然后是 HTML。

var firstLi = document.querySelector("#one");
var secondLi = document.querySelector("#two");
var thirdLi = document.querySelector("#three");

firstLi.addEventListener("click", done);
secondLi.addEventListener("click", done);
thirdLi.addEventListener("click", done);

firstLi.addEventListener("mouseover", hover);
secondLi.addEventListener("mouseover", hover);
thirdLi.addEventListener("mouseover", hover);

firstLi.addEventListener("mouseout", hoverOut);
secondLi.addEventListener("mouseout", hoverOut);
thirdLi.addEventListener("mouseout", hoverOut);

function done() {
  this.classList.toggle("greyout");
}

function hover() {
  this.classList.add("hover");
}

function hoverOut() {
  this.classList.remove("hover");
}

.hover {
  color: green;
}

.greyout {
  color: grey;
  text-decoration: line-through;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>to do's</title>
    <link rel="stylesheet" href="css/todo.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>

    <ul>
      <li id="one">One</li>
      <li id="two">Two</li>
      <li id="three">Three</li>
    </ul>

  <script src="todo.js" charset="utf-8"></script>
  </body>
</html>

Answer 1

Loops and functions 是将相同操作应用于多个值的常用方法。

将元素放在一个数组中并对其进行迭代：

var elements = [firstLi, /*...*/];

elements.forEach(function(element) {
   element.addEventListener(/*...*/);
   // ...
});

但如评论中所述，悬停效果可以在没有任何 JavaScript 的情况下使用 :hover CSS 选择器实现：

li:hover {
  color: green;
}

Answer 2

您可以使用事件委托并在列表中添加一个事件侦听器：

var list = document.querySelector("ul");
list.addEventListener("click", done);

function done(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle("greyout");
  }
}

li:hover {
  color: green;
}

.greyout {
  color: grey;
  text-decoration: line-through;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>to do's</title>
    <link rel="stylesheet" href="css/todo.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>

    <ul>
      <li id="one">One</li>
      <li id="two">Two</li>
      <li id="three">Three</li>
    </ul>

  <script src="todo.js" charset="utf-8"></script>
  </body>
</html>

Answer 3

function multipleHandler(element, events, handler){
        for(var iloop=0; iloop< events.length; iloop++){
           element.addEventListener(events[iloop], (function handlerFn(){
              return handler[iloop];
           })() );
        }
}

少量 JavaScript

Smaller amounts of JavaScript

javascript

dom-events