补充知识点：

时间对象的 toLocaleString 方法 可以得到本地化时间格式
let d = new Date()
console.log(d.toLocaleString())

字符串的trim() 方法
去除字符串的首尾空格
console.log(' ab c ')
console.log(' ab c '.trim())
console.log(' '.length)
console.log(' '.trim().length)

拓展：querySelector 和 querySelectorAll方法写法有2种
document.querySelector() 从页面中查找获取
元素.querySelector() 从元素中查找获取

一、事件对象

• 事件对象：当事件触发的时候，产生的对象，该对象记录有事件相关的信息
  如何获取：在事件绑定的回调函数的第一个参数就是事件对象
  一般命名为event、ev、e

   // 获取事件对象: 在事件处理函数中，添加形参e，就是事件对象（存着鼠标位置信息 、用户按键信息）
   //   形参e 事件对象  如果需要使用就写上，不用的话可以省略
   document.addEventListener('click', function (e) {
       console.log('click 事件触发了', e)
   })
  

• 获取事件对象属性

常用属性：
// 事件对象e 属性 + 方法
// 1. pageX pageY 鼠标位置信息
// 2. key 获取按键信息
// 3. stopPropagation() 阻止事件流动（事件冒泡）
// 4. preventDefault() 阻止浏览器默认行为

二、事件流

• 事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上触发所有父级元素的同名事件
事件冒泡是默认存在的(事件冒泡必须元素有注册上事件才存在（误解），元素是否有注册事件和事件冒泡没有关系)

• 事件捕获（了解即可）

演示事件捕获
addEventListener 方法 3个参数
true 表示使用的是事件捕获
false 表示使用的是事件冒泡 默认值
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

    document.addEventListener('click', function () {
        console.log(this) // document
    }, true)

    document.body.addEventListener('click', function () {
        console.log(this) // document.body
    }, true)

• 阻止事件流动

语法：事件对象.stopPropagation()
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

• 两种注册事件的区别

传统on注册（L0）
缺点：给同一个元素注册同一个事件多次，后面会覆盖前面
直接使用null覆盖就可以实现事件的解绑===解绑语法：元素.onclick = null

事件监听注册（L2）
语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
解绑：必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
而且匿名函数无法被解绑

• 阻止浏览器的默认行为

阻止默认行为，比如链接点击不跳转，表单域的不提交
事件对象e有 preventDefault 方法可以来阻止浏览器的默认行为
阻止浏览器的默认行为（a链接 跳转）
e.preventDefault()

• 事件委托

优点：给父级元素加事件（可以提高性能）
原理：事件冒泡，给父元素注册的事件，子元素是可以触发
实现：事件对象.target 可以获得真正触发事件的元素；事件对象.target.tagName获取标签名