综合案例的小知识点
字符串：
字符的数量 通过 length属性 可以获取到
trim() 去除字符的首尾空格
时间对象：toLocaleString() 可以得到本地化时间格式
querySelectorAll和querySelector的写法
document.querySelector() 从页面中来查找获取元素
元素.querySelector() 从元素中来查找
事件对象
当事件触发的时候，就会产生个对象，记录和该事件有关的信息，对象就是事件对象
获取：在事件处理函数中添加个形参e
常用的属性：
和鼠标相关的 e.pageX pageY 可以获取鼠标到页面的距离
和键盘相关的 key 得知用户按了哪个键 Enter回车键
小知识点
mousemove 鼠标移动事件
keydown keyup 键盘摁下 弹起事件
模拟点击了元素 元素.click()
事件流
事件会经历两个阶段
1.捕获阶段
2.冒泡阶段
事件冒泡，从里到外
当一个元素的事件触发了，同样的事件会在该元素的所有祖先元素中依次来触发
事件捕获，从外到里
通过addEventListener第三个参数来决定是冒泡还是捕获
true 表示注册的事件是在捕获阶段来触发
false 默认值 表示注册的事件是在冒泡阶段来触发
鼠标移入移出事件
mouseenter mouseleave 推荐使用 不会冒泡
mouseover mouseout 了解知晓即可
注册事件2种方式的区别
on方式
- 缺点：会有覆盖问题（给同一个元素注册同一个事件多次，后面会覆盖前面）
- 如何解绑：元素.on事件名 = null
- on方式注册的事件只能在冒泡阶段触发
addEventListener方式
- 没有 覆盖问题
- 如何解绑： 使用 removeEventListener 来解绑，事件处理函数不能是匿名函数，否则无法解绑
- addEventListener注册的事件是可以来决定事件是在捕获还是冒泡阶段触发
阻止事件冒泡
事件对象e.stopPropagation()
阻止浏览器的默认行为
事件对象e.preventDefault()
常见的默认行为
1.a链接默认跳转
2.表单提交
事件委托
作用
- 提高性能
- 可以让动态新创建的元素也能触发事件
如何实现
把事件委托注册给父元素（祖先元素）
如何得知触发事件的具体元素是谁：
1.e.target
2.e.target.tagName 标签名
原理：事件冒泡
