? 1.事件源： 绑定在谁身上的事件（和谁约定好）
? 2.事件类型： 绑定一个什么事件
? 3.事件处理函数： 当行为发生的时候，要执行哪一个函数
? 例如：
? 1.获取元素
? var box = document.querySelector(‘div‘)
? 2.给 div 绑定一个点击事件
? 事件源：div
? 事件类型：click （点击行为）
? 事件处理函数：准备一个函数，在点击行为处罚的时候执行
? on 是绑定事件的一种方式
? click 叫做事件类型
? 当页打开点击在 box 这个元素上的时候，会执行后面的函数
? box.onclick = function(){
? console.log(‘我被点击了‘)}
? 在 JS 的事件类型里面，没有大写字母
? 都是一些和鼠标相关的事件
? click 点击事件
? dblclick 双击事件
? contextmenu 右键单击事件
? mousedown 鼠标按下
? mouseup 鼠标抬起
? mousemove 鼠标移动
? mouseover 鼠标移入
? mouseout 鼠标移出
? mouseenter 鼠标移入
? mouseleave 鼠标移出
?
? 键盘事件无法确定我是在某一个元素上按下的键盘
? 所以一般来说我们键盘的绑定在 表单元素 或者 document 上
? 因为 表单元素 可以被选中，有没有焦点
? 因为 document 表示页面，你在这个页面中和不在这个页面中
? keydown 键盘按下
? keyup 键盘抬起
? keypress 键盘按下
?
? load 加载完毕
? resize 窗口滚动
? scroll 滚动条滚动
?
? 专门给 form 标签和 input 标签 和 textarea 标签和 select 标签使用的
? focus 聚焦事件
? blur 失焦事件
? change 改变事件
? input 输入事件
? submit 提交事件（绑定给 form 标签）
? reset 重置事件（绑定给 form 标签）
?
? touchstart 触摸开始（手放在屏幕上的时候）
? touchmove 触摸移动（手在屏幕上移动）
? touchend 触摸结束（手离开屏幕的时候）
? transitionend 过渡动画结束 需要绑定特殊的绑定方式
? animationend 帧动画结束 需要特殊的绑定方式
? selectstart 开始框文本
? 在每一个事件触发的时候都应该有一些描述性的信息
? 1.触发的是什么事件
? 2.鼠标事件的时候，光标坐标点是什么
? 3.键盘事件的时候，按下的是哪一个按键
?
? 当我们把这些信息放到了一个 对象 里面的时候
? 我们就管这个对象叫做 事件对象
? 事件对象：就是一个保存了本次事件的描述信息的对象数据类型
? 当你触发事件的时候, 浏览器会帮我们记录好这些内容
? 你只要获取到事件对象, 去里面进行查看就可以了
? 当你绑定好一个事件的以后
? 当用户触发这个事件的时候
? 那么浏览器会帮我们把关于这个事件的所有信息都记录下来
? 给到我们, 让我们使用
? 如何在事件里面获取事件对象
? 标准浏览器 => 直接在事件处理函数的时候接收一个形参的形式
? box.onclick = function (e) {}
? e => 就是一个形参, 你可以写 event 或者 ev 或者 e
? 会在事件触发的时候, 由 浏览器 给我们传递实参
? 我们直接在事件处理函数里面使用 e 就可以了
? 得到的就是事件对象(里面包含本次事件的一些描述信息)
? 所有事件都有事件对象
?
? IE 低版本 => 要使用 window.event 来获取
? 直接在事件处理函数里面使用 window.event 来获取
? 兼容方式
? 接收形参 e
? 在事件处理函数里面写 e = e || window.event
? 给形参 e进行重新赋值
? 赋值的内容, 如果有实参, 就使用实参, 如果没有, 就使用 window.event
?
? 1.button 属性： 决定的是你按下的鼠标的哪一个按键
? 2.clientX 和 clientY 属性： 相对于浏览器可视窗口左上角的坐标
? 3.pageX 和 pageY 属性： 相对于页面左上角的坐标
? 4.offsetX 和 offsetY 属性： 相对于元素左上角的坐标
? 键盘事件里面的主要信息就是
? 每一个键盘每一个按键都有一个自己的编码
? 通过事件对象里面的编码来确定按下时哪一个按键
? 获取编码的信息有两个
? e.keyCode 标准浏览器
? e.which 火狐 < 20 的版本
? 兼容处理
? var dode = e.keyCode||e.which
? 在事件对象里面有四个属性
? shiftKey 判断 shift 按键
? ctrlKey 判断 ctrl 按键
? altKey 判断 alt 按键
? metaKey 判断 win 按键
? 他们四个的值是布尔值
? 默认是 false ，表示没有按下
? 当你按下去的时候，他就变成 true ，表示按下了
? 我们在判断组合按键的时候
? 只要多判断一个属性是不是 true 就能知道你按下的是不是组合按键
? if(code === 65&&e.shiftKey === true && e.ctrlKey === true && e.altKey === true){
? aletr(‘您按下的是 shift + ctrl + alt +a‘)
? console.log(e)}
? 就是我们绑定事件的第二种方式
? dom0级 事件：使用 on 的方式进行绑定
? dom2级 事件：使用 监听器 的方式进行绑定
? 监听器：我们有两种监听器
? 标准浏览器使用的 监听器
? IE 低版本使用的监听器
? 语法： 元素.addEventListener （‘事件类型‘，事件处理函数）
? 作用： 给元素添加一个事件处理函数，当事件触发的时候有函数执行
? 语法： 元素.attachEvent （‘on 事件类型‘，事件处理函数）
? 作用： 给元素添加一个事件处理函数，当事件触发的时候有函数执行
? dom0 级事件，只能给一种事件绑定一个事件处理函数
? 因为是 " = " 赋值，当赋值第二个值的时候，第一个就被覆盖了
? dom2 级事件，可以给一种事件绑定多个事件处理函数
? 当事件触发的时候都会执行
? dom2 级事件中，addEventLister 和 attachEvet 的区别
? addEventLister
? 1.使用在标准浏览器
? 2.事件类型位置不需要 on
? 3.至少两个参数，一个是事件类型，一个是事件处理函数
? 4.当你给一个事件注册多个事件处理函数的时候
? 顺序注册，顺序执行
? attachEvent
? 1.使用在 IE 低版本浏览器
? 2.事件类型位置需要 on
? 3.只有两个参数, 一个是事件类型, 一个是事件处理函数
? 4.当你给一个事件注册多个事件处理函数的时候
? 顺序注册, 倒叙执行
原文：https://www.cnblogs.com/only-one1/p/12968516.html