事件对象, 事件流, 事件委派

1.1 事件对象的概念

`概念`： 当绑定了事件后，js内部提供的一个和事件类型相关的属性和方法的集合

`使用`：将字母'e'作为形参写入函数内，这个'e'就是事件对象
dom.onclick = function(e) { 
    // e: 事件对象
    // 常用的事件属性
    e.target: 事件的触发者 | this: 事件的绑定者
    e.clientX,e.clientY: 鼠标在可视窗口中的位置	
    e.pageX,e.pageY: 鼠标在文档中的位置
    e.offsetX, e.offsetY: 鼠标在当前元素中的位置
    e.keyCode: 键盘码： 按键对应的编码
    // 4个特殊的组合键： CtrlKey, altKey, shiftKey, metaKey
    // 常用的事件方法
    e.stopPropagation(): 阻止事件冒泡
    e.preventDefault(): 阻止默认行为： 默认行为： 链接的跳转|表单的提交
}

keydown和keyup事件的两个区别：
	1. keydown不能用来获取输入框的值，建议使用keyup获取
    2. keydown事件只要不松手，就会一直触发； keyup只在键盘弹起时触发一次

1.2 事件流

`概念`：事件在不同的dom节点上的触发顺序

`三个阶段`： 
	'冒泡阶段' 事件的触发顺序按照从小到大，从内到外的顺序依次触发： son -> father -> grandpa -> document
	'当前阶段' 真实的触发事件的dom节点
	'捕获阶段' 事件的触发顺序按照从大到小，从外到内的顺序依次触发： document -> grandpa -> father -> son
 
'注意'：传统事件和事件监听事件的两个区别：
// 1. 传统事件只能给相同的dom节点绑定一个同类型的事件，否则后面的会覆盖前面的； 事件监听事件可以给相同的dom节点绑定多个同类型的事件，会依次触发
// 2. 传统事件只有冒泡阶段； 事件监听事件可以通过设置第3个参数为true来实现事件捕获

1.3 事件委派

`理解`：把本该绑定给当前元素的事件，绑定给(写死在页面上)其祖先元素，利用事件冒泡和e.target来实现对当前元素的影响

`优点`：减少获取和遍历的次数，提高了代码的执行效率

`使用场景`： 针对动态生成的dom节点，可以使用事件委派