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

最新推荐文章于 2024-07-01 16:22:16 发布

疆子

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量467

点赞数 1

分类专栏：前端知识点总结文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/jiang_ziy/article/details/123213668

版权

前端知识点总结专栏收录该内容

31 篇文章 11 订阅

订阅专栏

事件

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. 事件委托

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

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

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

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

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

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

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

      //子元素
      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)