JavaScript webAPI 事件及排他思想

事件的组成:

事件：用户执行的操作 事件监听：监听用户是否进行了某个操作 事件处理：如果监听到用户真的进行某个操作，我们就进行相应的处理

语法：dom.addEventListener(事件类型，处理函数)

事件源 (谁被触发了) 事件 (用什么方式触发，点击还是鼠标经过等) 事件处理程序 （要做什么事情）

常见是事件类型:

我们只是传递一个当事件触发之后的处理函数，但是函数并不是开发者直接调用的，而是事件处理机制监听到事件触发之后再调用的

click:鼠标单击
dblclick:鼠标双击
mouseenter:鼠标进入
mouseleave:鼠标离开
keydown:按键按下 
keyup:按键松开
focus:聚焦事件
blur:失焦事件
input:内容改变事件
change:一般用于表单的上传
1.普通的输入框：内容改变同时失焦
2.对于file:文件选择完毕之后

排他思想可以理解为通过遍历或交集选择器,干掉所有或某个有样式的.

通过this或者下标找到自己或者对应的元素 再复活自己

    // 1.获取元素
    let lis = document.querySelectorAll('li')

    // 2.遍历伪数组
    for (let i = 0; i < lis.length; i++) {

      // 3. 为其中的每个元素绑定单击事件
      lis[i].addEventListener('click', function () {

        // 4. 方法一 重新循环数组,干掉有样式的元素
        lis.forEach(function (ele, index) {
          ele.classList.remove('active')
        })


        // 方法二 找到当前有样式的li元素,单独为它清除样式;对比全部循环来删,可以节省性能
        // 利用交集选择器获取页面有样式的li元素,直接清除
        document.querySelector('li.active').classList.remove('active')

        // 5.为当前点击的元素添加样式  this自己
        // lis[i].classList.add('active')
        this.classList.add('active')
      })
    }