【前端知识点总结】WebAPI DOM篇（二）事件

事件

1. 什么是事件

JavaScript 处理交互( 什么元素在什么时候做什么事情 )的一种技术

2. 事件三要素

• 事件源： 什么元素
• 事件类型： 什么时刻
• 事件处理函数： 做什么事 （单击，双击，移入，移出，获取焦点，失去焦点等）

3. 注册事件

事件注册的时候，不会执行（本质是声明函数过程）

1. 点语法注册事件

• 不能注册多个同名事件
• 语法 :
  • 事件源.事件类型 = 事件处理函数
    • box.onclick = function(){ }
  • 事件源.事件类型 = null

  let box = document.querySelector('.box')
  //注册点击事件
  box.onclick = function () {
     box.style.backgroundColor = 'green'
  }

2. addEventListener 语法注册事件

• 元素.addEvenetListener() : 可以注册多个同名事件
• 语法 :
  • 事件源.addEvenetListener(‘事件类型’,事件处理函数)
    • box.addEventListener('click',function(){})

3. removeEvenetListener 语法移除事件

• 语法 :
  • 事件源.removeEvenetListener(‘事件类型’,事件处理函数)
    • box.removeEvenetListener('click',fn)

        let fn =  function(){
            alert('1-好好学习')
        }
        /* 
        fn : 变量取值。  函数是一种数据类型，也可以像其他数据类型一样，进行赋值
        fn() : 调用函数，得到函数返回值
         */
        // 注册事件 
        box.addEventListener('click', fn )
        // 移除事件 
        box.removeEventListener('click',fn)

• 注意 :
  • 移除事件只能移除具名事件，无法移除匿名事件

4. 调用对象方法

• 当触发事件，浏览器自动帮我们执行这行代码
• 语法 : box.onclick()

5. 注意 :

• (1) 页面所有元素都可以注册事件
• (2) 页面每一个标签都可以注册多个事件
• (3) 点语法不能注册多个同名事件
• (4) 元素.addEvenetListener() : 可以注册多个同名事件

4. 事件类型 ( 业务中常用的 )

鼠标事件

• onclick : 鼠标单击
• ondblclick : 鼠标双击
• 鼠标移入移出
  • onmouseover / onmouseout : 支持冒泡
  • onmouseenter/onmouseleave : 业务中推荐, 不支持冒泡
• onmousemove : 鼠标移动

键盘事件

• oninput : 键盘输入
• onfocus : 成为焦点
• onblur : 失去焦点
• onkeydown : 键盘按下
• onkeyup : 键盘松开

其他事件

• onscroll ： 滚动条事件
  • 业务应用场景 : 获取网页滚动距离
    • 给页面注册 ： window.onscroll
    • 获取页面滚动距离 ： document.documentElement.scrollLeft / scrollTop
• onresize ：尺寸变化事件(视口变化)
  • 业务应用场景 : onresize 实现响应式布局
    • 给页面注册： window.onresize
    • 获取页面尺寸(视口)： document.documentElement.clientWidth / clientHeight

5. 事件对象

1. 事件对象

存储与事件(鼠标、键盘)相关数据

• 当一个事件在触发的时候，浏览器会捕捉事件触发相关的数据（鼠标坐标点、键盘按键），存入一个对象中，称之为事件对象

2. 获取事件对象

• 事件对象声明
  • 浏览器在触发事件的时候，自动捕捉事件触发相关数据存入对象
• 事件对象获取
  • 给事件处理函数添加形参 event / ev / e

3. 事件对象常用属性或方法

• e.pageX / e.pageY ： 获取鼠标触发点到页面左上角距离
• e.key ： 获取按键字符串 'Enter'
• e.keyCode ： 获取键盘 ASCII 码 enert 键是13
  • ASCII码 : 键盘每一个按键对应一个数字编码，称之为 ASCII 码
• e.preventDefault() 阻止默认事件(行为)
  • a标签 : 点击默认跳转到 href属性 链接
  • form标签 : 点击默认跳转到 action属性 对应的链接
• e.target ： 事件触发源。 获取真正触发事件的子元素，用于事件委托
• e.stopPropagation() : 阻止事件流 （冒泡 + 捕获都能阻止）

6. 事件冒泡

当子元素事件被触发的时候，子元素所有的父级元素 ‘同名事件’ 会被依次触发

• 触发顺序 ： 子元素 -> 父元素 -> body -> html -> document -> window
• 原理 ： 事件冒泡是浏览器特点，一直都存在。

      //子元素
      document.querySelector('.son').onclick = function(){
        alert('1-我是子元素')
      }

      //父元素
      document.querySelector('.father').onclick = function(){
        alert('2-我是父元素')
      }

      //body
      document.body.onclick = function(){
        alert('3-我是body')
      }
      
      //html
      document.documentElement.onclick = function(){
        alert('4-我是html')
      }

      //document
      document.onclick = function(){
        alert('5-我是document')
      }

      //window
      window.onclick = function(){
        alert('6-我是window')
      }

7. 事件捕获

当子元素事件被触发的时候，会先从最顶级的父元素一级一级往下触发

• 触发顺序 : window -> document -> html -> body -> 父元素 -> 子元素
• 原理 ： 事件冒泡是浏览器特点
• 如何注册捕获事件
  • (1) 点语法注册的事件一定是冒泡，无法注册捕获
  • (2) 只有一种语法可以注册捕获事件
    • 元素.addEventListener('事件类型',事件处理函数,true)
    • addEventListener 第三个参数是一个布尔类型，默认值是 false (冒泡) true (捕获)

     //子元素
      document.querySelector('.son').addEventListener('click',function(){
        alert('1-我是子元素')
      },true)

      //父元素
      document.querySelector('.father').addEventListener('click',function(){
        alert('2-我是父元素')
      },true)

      //body
      document.body.addEventListener('click',function(){
        alert('3-我是body')
      },true)
      
      //html
      document.documentElement.addEventListener('click',function(){
        alert('4-我是html')
      },true)

      //document
      document.addEventListener('click',function(){
        alert('5-我是document')
      },true)

      //window
      window.addEventListener('click',function(){
        alert('6-我是window')
      },true)

8. 事件委托

1. 什么是事件委托 : 给父元素注册事件，委托子元素处理
2. 事件委托的原理 ： 事件冒泡
3. 事件委托注意点 : 不能使用 this
   • this : this 指向事件源（父元素，事件委托是给父元素注册的）
   • e.target : 触发父元素事件的子元素 （事件触发源，触发冒泡的源头）

      //事件委托
      document.querySelector('ul').onclick = function (e) {
        alert(e.target.innerText)
      }

注意 : 如果一个元素是动态新增的 (新增节点) ，则无法直接注册事件

9. 事件流三个阶段 e.eventPhase

e.eventPhase 事件执行的当前阶段。

分别表示捕获阶段、目标阶段和冒泡阶段。

1. 捕获阶段
   • 当子元素事件被触发的时候，会先从最顶级的父元素一级一级往下触发
2. 目标阶段 ：点击的元素
3. 冒泡阶段

      //子元素
      document.querySelector('.son').addEventListener('click',function(e){
        alert('1-我是子元素' + e.eventPhase)
      },false)

      //父元素
      document.querySelector('.father').addEventListener('click',function(e){
        alert('2-我是父元素' + e.eventPhase)
      },false)

      //body
      document.body.addEventListener('click',function(e){
        alert('3-我是body' + e.eventPhase)
      },false)
      
      //html
      document.documentElement.addEventListener('click',function(e){
        alert('4-我是html' + e.eventPhase)
      },false)

      //document
      document.addEventListener('click',function(e){
        alert('5-我是document' + e.eventPhase)
      },true)

      //window
      window.addEventListener('click',function(e){
        alert('6-我是window' + e.eventPhase)
      },true)

阻止事件流动 : 阻止冒泡 + 捕获

使用 e.stopPropagation() 属性