利用闭包解决循环调节列表，其他一些问题也可以使用下面的方法

问题描述：

页面上有这么一个列表：

• 1 UP DOWN
• 2 UP DOWN
• 3 UP DOWN
• ...

点击 UP 按钮会使得该 li 元素在列表中上升一个位置，点击 DOWN 按钮会使得该 li 元素下降一个位置。点击最后的元素的 DOWN 按钮会使得元素回到第一个位置，点击第一个元素的 UP 按钮会使其回到最后的位置。

页面上已经存在该列表，你只需要完成 initAdjustableList() 函数，给元素添加事件。

处理代码：

const initAdjustableList =()=>{
  const ul=document.getElementById('adjustable-list'),
        btns=ul.getElementsByTagName('button'),
        lists=ul.getElementsByTagName('li');
        len=lists.length;
        [...btns].forEach((btn)=>{
           btn.onclick=(event)=>{
            event = event || window.event;
             let text=event.target.innerText;
             [...lists].forEach((list,index)=>{
               if(list.isEqualNode(event.target.parentNode)){
                 if(text=='UP'){
                   ul.insertBefore(list,lists[index-1])
                 }
                  else{
                   ul.insertBefore(list,lists[index+2>len?0:index+2])
                 }
               }
             })
           } 
        }
        )
    
  }

上面的方法是最容易想到的，却也是最麻烦的，如果可以联想到事件委托那就是极好的了，事件委托就是利用一个元素的响应事件来处理一类事件，一般都是将事件绑定到父元素上，利用事件冒泡机制触发外层事件，下面是用事件委托的思想的实现。

const initAdjustableList =()=>{
const ul=document.getElementById('adjustable-list')；
const children_li=ul.children()
//给父元素绑定事件
document.getElementById('adjustable-list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'button') {
         const li = target.parentNode;
         const index = [...children_li].indexOf(li);
         let newIndex = 0;
      if (target.className === 'up') {
        newIndex = index - 1 < 0 ? children_li.length : index - 1
      } else {
        newIndex = index + 2 > children_li.length ? 0 : index + 2
      }
      ul.insertBefore(li, children_li[newIndex])
  }
});
}