1.什么是事件(用户做的动作)

事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮

2.什么是事件监听（让一个元素监听一个事件）

就是让程序检测是否有事件产生，一旦有事件发生，就立即调用一个函数作出响应，也成为绑定事件护着注册事件比如鼠标经过显示下拉菜单，比如点击可以播放轮播图

1.事件监听（事件绑定）三要素

// 语法：元素对象.addEventListener('事件类型'，要执行的函数)
// 三要素：
// 1.事件源：那个dom元素被事件触发了，要获取dom元素
// 2.事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover // 3.事件调用的函数：要做什么事

// click 单击事件

// dblclick 双击事件

2.事件类型

事件的触发方式

1.鼠标事件

    // 1.mouseenter :鼠标经过
    // 2.mouseleave :鼠标离开
    // 3.mousemove :鼠标移动
    // 获取元素
    const div = document.querySelector('div')
    const img = document.querySelector('img')
    div.addEventListener('mouseenter',function(){
      div.style.background = 'purple'
      img.style.visibility = 'visible'
    })
    div.addEventListener('mouseleave',function(){
      div.style.background = ''
      img.style.visibility = 'hidden'
    })
    div.addEventListener('mousemove',function(){
      console.log(Math.random());
    })
  </script>

2.焦点事件

    input{
      border: 1px solid #e0e0e0;
      outline: none;
    }
    .active{
      border:2px solid red;
    }
  </style>

<body>
  <!-- 
1.focus 获得焦点
2.blur 失去焦点
   -->
  <input type="text" name="" id="">
  <!-- <ul>
    <li>陈磊的癖好1</li>
    <li>陈磊的癖好2</li>
  </ul> -->
  <script>
    //获得焦点，添加背景，失去焦点移除背景
    // 1.获得元素
    const inp = document.querySelector('input')
    // 2.监听事件
    // foucs 获得焦点
    inp.addEventListener('focus',function(){
      inp.style.backgroundColor = 'plum'
      inp.classList.add('active')
    })
    // 失去焦点
    inp.addEventListener('blur',function(){
      inp.style.background = ''
      inp.classList.remove('active')
    })
  </script>
</body>

3.文本事件

  <input type="password">
  <button></button>
  <script>
    // 输入事件(表单输入触发的事件)
    const inp = document.querySelector('input')
    const btn = document.querySelector('button')
    inp.addEventListener('input',function(){
      btn.innerHTML = inp.value
    })
  </script>
</body>

4.键盘事件

  <script>
    // keydown:打印按下，键盘按下
    // keyup:打印松开，键盘抬起
    document.addEventListener('keydown',function(){
      console.log('按下');
    })
    document.addEventListener('keyup',function(){
      console.log('抬起');
    })
  </script>
</body>

3.事件对象

    // 事件对象：事件触发时，产生的一个对象，称为事件对象
      //  也是个对象，这个对象里有事件触发时的信息
    // 获取事件对象
      // 事件对象使用：只要在事件处理函数中加入第一个形参即可
      // 在事件绑定的回调函数的第一个参数就是事件对象
      //这个形参通常使用： e,ev,event表示
      document.addEventListener('click',function(a){
        console.log(a);
      })
  </script>

4.事件对象属性

    document.addEventListener('keyup',function(e){
      // 事件对象.key：键盘值(键盘输入的值)
      // console.log(e.key);
      if(e.key === 'q'){
        console.log(1);
      }else if(e.key === 'd'){
        console.log(2);
      }
    })
    // 组合键
    document.addEventListener('keydown',function(ev){
      if(ev.ctrlKey && ev.key === 'Enter'){
        console.log('OK');
      }
    })
  </script>

DOM之事件监听