前端: 通过代码的方式和页面中的某些内容做好一个约定
用户: 触发指定行为的时候, 就会执行代码
事件绑定的三要素：
1.事件源 : 和 谁 做好约定
2.事件类型 : 约定一个什么 行为
3.事件处理函数 : 当用户触发该行为的时候, 执行什么代码
语法：事件源.on事件类型 = 事件处理函数 or 事件源.addEventListener(事件类型，事件处理函数)
差别：1.onXXX绑定事件时，如果绑定了相同事件，则后面的会覆盖前面的。
addEventListener相同的事件可以绑定多次，执行时也是顺序执行。
2.onXXX绑定事件时，事件只能是按冒泡模式执行。
addEventListener绑定事件时，可以由用户在最后一个参数选择是冒泡还是捕获。
事件类型：
在前面的子任务中，我们完成了鼠标移动时的事件绑定与色盘点击时的事件绑定，
但是无法实现色盘颜色的后去与圆点跟随鼠标移动，如果想实现这两个功能，就需要使用到事件中的一个重要东西：事件对象
事件对象就是当事件触发的时候, 一个描述该事件信息的对象数据类型
1、如果是JS绑定事件，那么事件对象是事件被触发时JS主动传递的
2、如果是自己在html标签上行内绑定，则需要自己传值
offsetX 和 offsetY
相对于触发事件的元素
clientX 和 clientY
相对于浏览器可视窗口
pageX 和 pageY
相对于页面文档流
浏览器响应事件的机制
捕获阶段 : 从 window 按照结构子级的顺序传递到 目标
目标阶段 : 准确触发事件的元素接收到行为
冒泡阶段 : 从 目标 按照结构父级的顺序传递到 window
本次事件传播结束
