事件委托,数组去重

文章目录

• 事件委托
• • 关于target
  • currentTarget
  • 数组去重的十一种方法
  • • es6方法
    • es6简洁
    • for循环嵌套，splice
    • indexOf 去重
    • 利用sort
    • includes
    • 利用 hasOwnProperty
    • filter
    • 利用递归去重
    • Map 数据结构去重
    • reduce+includes

      事件委托

      1. 给"ul"标签添加点击事件
      2. 当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”…"

         注意：

      3. 必须使用DOM0级标准事件（onclick）
      • .
      • .
      • .
      // 填写JavaScript document.querySelector('ul').onclick = event => { event.target.innerText +='.' }

      关于target

      target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

      （）

      作用：可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素，直接使用target点击就可获取

      currentTarget

      currentTarget 事件属性返回其事件侦听器触发了该事件的元素。

      （）

      这在捕获和冒泡期间特别有用。

      currentTarget 属性总是引用其事件侦听器触发事件的元素，与 target 属性相反，它返回触发事件的元素。

      总之，

      target表示当前触发事件的元素

      currentTarget是绑定处理函数的元素

      只有当事件处理函数绑定在自身的时候，target才会和currentTarget一样

      数组去重的十一种方法

      var arr = [1,1,2,3,4,4,6]

      es6方法

      return Array.from(new Set(arr))

      es6简洁

      return (new Set(...arr))

      for循环嵌套，splice

        for(var i=0; i            for(var j=i+1; j                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个                    arr.splice(j,1);                    j--;                }            }        if (array .indexOf(arr[i]) === -1) {            array .push(arr[i])        }    }    return array;        if (arr[i] !== arr[i-1]) {            arrry.push(arr[i]);        }    }    return arrry;            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值                    array.push(arr[i]);              }    }    return array};    return arr.filter(function(item, index, arr){        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)    })    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素    return arr.indexOf(item, 0) === index;  });            if(array[index] === array[index-1]){                array.splice(index,1);            }            loop(index - 1);    //递归loop，然后数组去重        }    if(map .has(arr[i])) {  // 如果有该key值      map .set(arr[i], true);     } else {       map .set(arr[i], false);   // 如果没有该key值      array .push(arr[i]);    }  } 

      h3reduce+includes/h3 pre return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);