JavaScript的事件处理

认识事件处理

◼ Web页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：
    比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；
    浏览器需要搭建一条JavaScript代码和事件之间的桥梁；
    当某个事件发生时，让JavaScript可以相应（执行某个函数），所以我们需要针对事件编写处理程序（handler）；
◼ 如何进行事件监听呢？
    事件监听方式一：在script中直接监听（很少使用）；
    事件监听方式二：DOM属性，通过元素的on来监听事件；
    事件监听方式三：通过EventTarget中的addEventListener来监听；

案例:

      <!-- 方案一:直接在HTML中编写JavaScript代码 -->
      <button onclick="console.log('按钮1发生了点击')">按钮1</button>
      <button class="btn2">按钮2</button>
      <button class="btn3">按钮3</button>
      <script>
        var but2El = document.querySelector(".btn2")
        var but3El = document.querySelector(".btn3")
        // 2.onclick属性
        but2El.onclick = function(){
          console.log("按钮2发送了点击")
        }
        // 3.addEventListener
        but3El.addEventListener ("click",function(){
          console.log("按钮3发送了点击")
        })
      </script>

事件流

◼ 事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢？
  我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；
  这是因为我们的HTML元素是存在父子元素叠加层级的；
  比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的；

事件冒泡和事件捕获

◼ 我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;
◼ 事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）；
◼ 为什么会产生两种不同的处理流呢？
    这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题;
    但是他们采用了完全相反的事件流来对事件进行了传递；
    IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式；
事件捕获的案例
  spanEl.addEventListener("click",function(){
  console.log("span被点击了")
  },true)
  divEl.addEventListener("click",function(){
    console.log("div被点击了")
  },true)
  bodyEl.addEventListener("click",function(){
    console.log("body被点击了")
  },true)
  htmlEl.addEventListener("click",function(){
    console.log("html被点击了")
  },true)

事件冒泡和事件捕获流程

  ◼ 如果我们都监听，那么会按照如下顺序来执行：
  ◼ 捕获阶段（Capturing phase）：
      事件（从Window）向下走近元素。
  ◼ 目标阶段（Target phase）：
      事件到达目标元素。
  ◼ 冒泡阶段（Bubbling phase）：
      事件从元素上开始冒泡。
  ◼ 事实上，我们可以通过event对象来获取当前的阶段：
      eventPhase
  ◼ 开发中通常会使用事件冒泡，所以事件捕获了解即可。

事件对象event

  ◼ 当一个事件发生时，就会有和这个事件相关的很多信息：
      比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息；
      那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象；
      该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作；
  ◼ 如何获取这个event对象呢？
      event对象会在传入的事件处理（event handler）函数回调时，被系统传入；
      我们可以在回调函数中拿到这个event对象
案例:
    var divEl = document.querySelector("div")
    divEl.onclick = function(event){
      console.log("div被点击",event)
    }

event的常见的属性和方法

  ◼ 常见的属性：
      type：事件的类型；
      target：当前事件发生的元素；
      currentTarget：当前处理事件的元素；
      eventPhase：事件所处的阶段；
      offsetX、offsetY：事件发生在元素内的位置；
      clientX、clientY：事件发生在客户端内的位置；
      pageX、pageY：事件发生在客户端相对于document的位置；
      screenX、screenY：事件发生相对于屏幕的位置；
  ◼ 常见的方法：
      preventDefault：取消事件的默认行为；
      stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；

EventTarget类使用

  ◼ 我们会发现，所有的节点、元素都继承自EventTarget
      事实上Window也继承自EventTarget；
  ◼ 那么这个EventTarget是什么呢？
      EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件；
  ◼ EventTarget常见的方法：
      addEventListener：注册某个事件类型以及事件处理函数；
      removeEventListener：移除某个事件类型以及事件处理函数；
      dispatchEvent：派发某个事件类型到EventTarget上；
    案例:
      <script>
      // eventtarget就可以实现类似于事件总线的效果
      window.addEventListener("hdc",function(){
        console.log("监听哈哈哈哈")
      })
      // 派发事件
      setTimeout(function(){
        window.dispatchEvent(new Event("hdc"))
      },5000)
    </script>

事件处理中的this

  ◼ 在函数中，我们也可以通过this来获取当前的发生元素：
  var boxEl=document.querySelector(".box")
  boxEl.onclick = function(event){
    console.log(this)
    console.log(event.target)
    console.log(event.currentTarget)
    console.log(boxEl)
    console.log(this === event.target)
  }//true
  ◼ 这是因为在浏览器内部，调用event handler是绑定到当前的target上的

事件委托模式

  ◼ 事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式–事件委托模式（也是一种设计模式）
  ◼ 那么这个模式是怎么样的呢？
      因为当子元素被点击时，父元素可以通过冒泡可以监听到子元素的点击；
      并且可以通过event.target获取到当前监听的元素；
  ◼ 案例：一个ul中存放多个li，点击某一个li会变成红色
      方案一：监听每一个li的点击，并且做出相应；
      方案二：在ul中监听点击，并且通过event.target拿到对应的li进行处理；
        ✓ 因为这种方案并不需要遍历后给每一个li上添加事件监听，所以它更加高效；
        统一在ul中监听---委托模式/代理模式
        // 统一在ul中监听---委托模式/代理模式
        // 方法一:
        var ulEl = document.querySelector("ul")
        var activeEl = null
        ulEl.onclick=function(event){
          // console.log(event.target)
          // 1. 将之前的active移除
          // for (var i = 0 ;i <ulEl.children.length;i++){
          //   var liEl = ulEl.children[i]
          //   if(liEl.classList.contains("active")){
          //   ulEl.children[i].classList.remove("active")
          //   }
          // }

          // 方法二:
            // var activeEl = ulEl.querySelector(".active")
            // activeEl && activeEl.classList.remove("active")
          // 方法三 变量记录的方式
          if (activeEl){
            activeEl.classList.remove("active")
          }
          // 2.给点击的添加
          event.target.classList.toggle("active")
          // 记录 最新的active的li
          activeEl = event.target
        }

常见的事件

◼ 鼠标事件：

    click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
    contextmenu------在用户点击鼠标右键打开上下文菜单时触发
    dblclick --------当用户双击某个对象时调用的事件句柄
    mousedown -------鼠标按钮被按下。
    mouseup ---------鼠标按键被松开。
    mousemove —— 当鼠标移动时。
    mouseover ------鼠标移到某元素之上。（支持冒泡）
    mouseout --------鼠标从某元素移开。（支持冒泡）
    mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
    mouseenter 当鼠标指针移动到元素上时触发。（不支持冒泡）
    mouseleave 当鼠标指针移出元素时触发。（不支持冒泡）

mouseover和mouseenter的区别

◼ mouseenter和mouseleave
    不支持冒泡
    进入子元素依然属于在该元素内，没有任何反应
    不能做事件委托
◼ mouseover和mouseout
    支持冒泡
    进入元素的子元素时
        ✓ 先调用父元素的mouseout
        ✓ 再调用子元素的mouseover
        ✓ 因为支持冒泡，所以会将mouseover传递到父元素中；

◼ 键盘事件：

    onkeydown --------某个键盘按键被按下。
    onkeypress -------某个键盘按键被按下。
    onkeyup ----------某个键盘按键被松开。
    keydown 和keyup ——当按下和松开一个按键时。
    ◼ 事件的执行顺序是onkeydown、onkeypress、onkeyup
        down事件先发生；
        press发生在文本被输入；
        up发生在文本输入完成；
    ◼ 我们可以通过key和code来区分按下的键：
        event.code：“按键代码”（"KeyA"，"ArrowLeft" 等），特定于键盘上按键的物理位置。
        event.key：字符（"A"，"a" 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）

◼ 表单（form）元素事件：

    onchange  该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
    oninput    元素获取用户输入时触发
    onfocus    元素获取焦点时触发
    onblur     元素失去焦点时触发
    onreset    表单重置时触发
    onsubmit   表单提交时触发

◼ Document 事件：

    DOMContentLoaded —— 当HTML 的加载和处理均完成，DOM 被完全构建完成时。

◼ CSS 事件：

    transitionend —— 当一个 CSS 动画完成时。

resize 事件

    window.onresize = function(){
      console.log("窗口大小发生改变时")
    }

使用事件 当动画结束时

boxEl.ontransitionend = function(){
  console.log("动画执行完成")
  boxEl.remove()
}

文档加载事件

◼ DOMContentLoaded：浏览器已完全加载 HTML，并构建了DOM 树，但像<img> 和样式表之类的外部资源可能尚未加载完成。
◼ load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。
◼ 事件类型：
https://developer.mozilla.org/zh-CN/docs/Web/Events