JavaScript中的DOM（三）

1.事件监听的方式

• 事件监听方式一：在script中直接监听（很少使用）；
• 事件监听方式二：DOM属性，通过元素的on来监听事件；
• 事件监听方式三：通过EventTarget中的addEventListener来监听；

<div class="box" id="box" onclick="alert('box点击')">
      我是box
    </div>
    <script>
      var boxEl = document.querySelector('.box')
      boxEl.onclick = function(){
        alert('onclick点击')
      }
      boxEl.addEventListener('click',function(){
        console.log("addEventListener");
      })
    </script>

onclick的方式不能添加多个事件，但是addEventListener可以添加多个事件 

常见的事件

• ◼ 鼠标事件：
•  click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
•  mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。
•  mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
•  mousemove —— 当鼠标移动时。
• ◼ 键盘事件：
•  keydown 和 keyup —— 当按下和松开一个按键时。
• ◼ 表单（form）元素事件：
•  submit —— 当访问者提交了一个时。
•  focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 。
• ◼ Document 事件：
•  DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。
• ◼ CSS 事件：
•  transitionend —— 当一个 CSS 动画完成时。

2.事件冒泡和事件捕获

默认情况下事件是从最内层向外依次传递的顺序，这个顺序我们称之为事件冒泡；

另外一种监听事件流的方式就是从外层到内层，这种称之为事件捕获。

监听的时候，有下面几种阶段

捕获阶段

• 事件（从Window）向下走近元素；

目标阶段

• 事件到达目标元素；

冒泡阶段

• 事件从元素上开始冒泡 ；

 3.事件对象event

当一个事件发生时，就会有和这个事件相关的很多信息：

• 比如事件的类型是什么，你点击的是哪个元素，点击的位置是哪里
• 这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象

获取这个event对象

• event对象会在传入的事件处理函数回调；
• 我们可以在回调函数中拿到这个event对象；

El.onclick = function(event){
    console.log("事件对象", event)
}
El.addEventListener("click", function(event){
    console.log("事件对象", event)
})

event常见的属性和方法

常见的属性：

• type：事件的类型；
• target：当前事件发生的元素；
• currentTarget：当前处理事件的元素；
• eventPhase：事件所处的阶段；
• offsetX、offsetY：事件发生在元素内的位置；
• clientX、clientY：事件发生在客户端内的位置；
• pageX、pageY：事件发生在客户端相对于document的位置；
• screenX、screenY：事件发生相对于屏幕的位置；

常见的方法：

• preventDefault：取消事件的默认行为；
• stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；

事件处理中的this

• 在函数中，我们可以通过this来获取当前发生的元素：

El.addEventListener("click", function(event){
    console.log(this === event.target) //true
})

4.EventTarget类

我们发现，所有的节点，元素都继承自EventTarget

window也继承自EventTarget

• EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件

 常见的EventTarget方法

• addEventListener：注册某个事件类型以及事件处理函数；
• removeEventListener：移除某个事件类型以及事件处理函数；
• dispatchEvent：派发某个事件类型到EventTarget上；

El.addEventListener("click", function(){
    console.log("点击了el")
})

El.addEventListener("click", function(){
    window.dispatchEvent(new Event("aaa"))    
})

window.addEventListener("aaa", function(event){
    console.log("监听到aaa事件", event)
})

5.事件委托 

事件冒泡可以帮助我们实现强大的事件处理模式-事件委托模式

 因为 当子元素被点击 时，父元素可以 通过冒泡可以监听到子元素的点击 ；

 并且 可以通过event.target获取到当前监听的元素 ；

6. 常见的鼠标事件

 <div class="box"></div>
    <script>
      var boxEl = document.querySelector(".box")
      // boxEl.onclick = function() {
      //   console.log("这样有用吗")
      // }
      boxEl.addEventListener("click", function() {
        console.log("点击了box")
      })
      boxEl.addEventListener("contextmenu", function(event) {
        console.log("菜单")
        event.preventDefault();
      })
      boxEl.addEventListener("dblclick", function() {
        console.log("老铁双击");
      })
      boxEl.addEventListener("mousedown", function() {
        console.log("按下");
      })
      boxEl.addEventListener("mouseup", function() {
        console.log("抬起");
      })

    </script>

7.mouseover和mouseenter的区别

◼ mouseenter和mouseleave

 不支持冒泡

 进入子元素依然属于在该元素内，没有任何反应

◼ mouseover和mouseout

 支持冒泡

 进入元素的子元素时

✓ 先调用父元素的mouseout

✓ 再调用子元素的mouseover

✓ 因为支持冒泡，所以会将mouseover传递到父元素中；

<div class="parent">
      <div class="box"></div>
    </div>
    <script>
      var parentEl = document.querySelector(".parent")
      var boxEl = document.querySelector(".box")
      // boxEl.onmouseenter = function() {
      //   console.log("mouseenter");
      // }
      // boxEl.onmouseleave = function() {
      //   console.log("mouseleave");
      // }
      parentEl.onmouseover = function() {
        console.log("mouseover");
      }
      parentEl.onmouseout = function() {
        console.log("mouseout");
      }
      boxEl.onmouseover = function() {
        console.log("mouseover");
      }
      boxEl.onmouseout = function() {
        console.log("mouseout");
      }

    </script>

8.常见的键盘事件

<input class="inp" type="text">
    <button class="btn">搜索</button>
    <script>
      var inpEl = document.querySelector(".inp")
      var btnEl = document.querySelector(".btn")
      inpEl.onkeydown = function() {
        console.log("onkeydown");
      }
      inpEl.onkeypress = function() {
        console.log("onkeypress");
      }
      inpEl.onkeyup = function(event) {
        console.log(event.key, event.code);
      }
      // 1.搜索功能
      btnEl.onclick = function() {
        console.log("进行搜索功能", inputEl.value)
      }

      inputEl.onkeyup = function(event) {
        if (event.code === "Enter") {
          console.log("进行搜索功能", inputEl.value)
        }
      }
      // 2.按下s的时候, 搜索自动获取焦点
      document.onkeyup = function(event) {
        if (event.code === "KeyS") {
          inputEl.focus()
        }
      }
    </script>

9.表单事件

<form action="/abc">
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <button type="reset">重置</button>
    <button type="submit">提交</button>
  </form>
  <script>
    var inputEl = document.querySelector("input")
    // 1.获取焦点和失去焦点
    // inputEl.onfocus = function() {
    //   console.log("input获取到了焦点")
    // }
    // inputEl.onblur = function() {
    //   console.log("input失去到了焦点")
    // }

    // 2.内容发生改变/输入内容
    // 输入的过程: input
    // 内容确定发生改变(离开): change
    // inputEl.oninput = function() {
    //   console.log("input事件正在输入内容", inputEl.value)
    // }
    // inputEl.onchange = function() {
    //   console.log("change事件内容发生改变", inputEl.value)
    // }

    // 3.监听重置和提交
    var formEl = document.querySelector("form")
    formEl.onreset = function(event) {
      console.log("发生了重置事件")
      event.preventDefault()
    }

    formEl.onsubmit = function(event) {
      console.log("发生了提交事件")
      // axios库提交
      event.preventDefault()
    }
  </script>

10.文档加载事件

◼ DOMContentLoaded ：浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载

完成。

◼ load ：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

window.addEventListener("DOMContentLoaded", function() {
        console.log("dom内容加载");
      })
      window.addEventListener("load", function() {
        console.log("所有内容加载");
      })