JS正则&事件

1) 正则表达式 [ 了解 ]
2) 事件对象   [ 重点 ]
3) dom事件流  [ 了解 ]
4) 事件委派   [ 重点 ]

---

2. 正则表达式 [ 了解 ]

   1. 概念: 是描述字符模式的对象

   2. 深入理解:
      a. 正则表达式本身是一个字符串,但是必须配合其它编程语言才能发挥它的作用
      b. 配合js使用,在js中正则就是一个对象
      c. 作用: 通常用于验证 提取 替换字符串

      前端: 验证输入信息的合法性

   3. 定义方式

      1> 实例化对象
      let reg = new RegExp(‘字符串/元字符’, [模式修饰符])

      2> 字面量对象
      let reg = /字符串-元字符/[模式修饰符]

      注意: 语法中[]表示可选参数

​
4) 验证方式

    reg.test(str) : 判断str中是否含有指定规则reg的值  === bool值

---

3. 事件四要素 - 重点

   1. 事件源 : 事件发生的对象-事件发生在谁身上, 谁就是事件源
   2. 事件类型 : 在事件源上发生了什么类型的事件
   3. 事件句柄 : 事件处理函数, 事件发生时所执行的操作
   4. 事件对象 : 伴随事件产生的一个对象,包含了事件发生时的所有信息 === 旁观者

---

4. 注册事件 - 重点

   1. DOM0级事件

      1> 行内式(标签内部式)
      <标签 οnclick=“js代码”> </标签>

      2> dom对象注册
      eleObj.onclick = function (event/e){

       }
      

   2. DOM2级事件

      1> 添加事件监听器
      eleObj.addEventListener(‘click’, function (event/e){

       })
      

   面试题: DOM0级事件和DOM2级事件的区别
   同一个类型的事件是否能够注册多次

---

5. 事件对象 - 重点

   1. 概念: 伴随事件产生的一个对象( event )

   2. 理解: 包含了事件发生时的所有信息

   3. 语法: 通常作为事件处理函数的第一个参数引入

      eleObj.addEventListener(‘click’, function (e){

      })

   4. 属性和方法
      //属性
      e.target //事件源
      e.type //事件类型
      e.clientX //鼠标距离浏览器窗口的水平坐标
      e.clientY //鼠标距离浏览器窗口的垂直坐标
      e.keycode //键码值
      e.which //键码值

      //方法
      e.preventDefault(); //阻止浏览器的默认行为
      e.stopPropagation(); //阻止事件冒泡

---

6. dom事件流 - 了解

   1. 概念: 事件流描述元素接收事件的顺序
   2. 理解: 事件流在目标元素和父辈元素之间的事件传播过程
   3. 三个阶段:
      捕获: 从window —> 目标元素传播的过程
      目标: 目标元素触发事件的过程
      冒泡: 从目标元素 —> window传播的过程

---

7. 事件委派 - 重点

   1. 为什么要使用事件委派?
      DOM2级事件对于未来新增的元素不存在事件行为

   2. 小名
      事件委托 事件代理 事件派发

   3. 设计原理
      利用事件冒泡原理设计
      先把事件注册在已存在的父辈元素上 === 点击目标元素,就会触发父辈元素上的事件

   4. 好处
      提升性能
      未来新增元素绑定事件

   5. 如何使用
      父辈元素.addEventListener(‘事件’, function (){
      if( e.target.nodeName === ‘标签名’ ){
      //执行操作
      }
      })

      父辈元素.addEventListener(‘事件’, function (){
      if( e.target.classList.contains(‘类名’) ){
      //执行操作
      }
      })