事件的三要素：

1. 事件源
2. 事件类型
3. 事件处理程序

事件类型

1. 鼠标类
   左键单击
       click
           [按下+抬起=完整的点击]
   左键双击
       dblclick
   右击单击
       contextmenu
           [常用场景：接触右击菜单]
   --------------------------------------------------
   左键/右键/滚轮按下
       mousedown
   左键/右键/滚轮按下
       mouseup
   --------------------------------------------------
   光标覆盖
       mouseover
           [光标在父子元素间切换时 会 重复触发事件]
           [即 支持 事件冒泡]
   光标离开
       mouseout
           [同上]
   --------------------------------------------------
   光标移进
       mouseenter
           [光标在父子元素间切换时 不会 重复触发事件]
           [即 不支持 事件冒泡]
   光标移出
       mouseleave
           [同上]
   --------------------------------------------------
   键盘任意键按下
       keydown
           [按住不放会持续触发该事件 所以一般使用keyup 特殊场景才会使用keydown]
   键盘任意键抬起
       keyup
   键盘任意 字符键 按下
       keypress
           [按住不放会持续触发该事件]
       
       [只有 可选中 的元素才能触发键盘事件 反例：div]
   --------------------------------------------------
   光标移动
       mousemove
   滚轮滚动
       mousewheel
           滚轮事件的特殊参数：
               window.event.wheelDelta
                   [向前滚轮：window.event.wheelDelta === 150]
                   [向后滚轮：window.event.wheelDelta === -150]
2. 浏览器类
   网页加载
       load
   滚动事件
       scroll
           [有滚动条且发生滚动才能触发]
   窗口大小变化
       resize
           [常用场景：JS手动实现移动端媒体查询]
3. 表单类
   获取焦点
       focus
   失去焦点
       blur
   元素改变
       change
           [常用场景：select下拉框改变 / 单选框、多选框改变]
   提交表单
       submit
           [该事件只能由form绑定]
   监听input标签的value值
       input
           [适用对象包括但不限于：文本框、单选框、多选框]

事件的绑定

1. on类绑定

案例：
<button id="btn">这是个按钮</button>

语法：
// 1.常规
// 事件源.on事件类型 = function(){}
btn.onclick=function(){alert('李在淦神魔？')}

// 2.
// 赋值式函数
// 事件源.on事件类型 = 变量
var fn=function(){alert('李在淦神魔？')}
btn.onclick=fn

// 3.
// 命名式函数
// 事件源.on事件类型 = 函数名
function fn(){alert('李在淦神魔？')}
btn.onclick=fn

// 4.行内编写js代码
//事件源 on事件类型='js代码'
<button onclick='alert("李在淦神魔？")'>这是个按钮</button>

// 5.行内调用函数
// 事件源 on事件类型='变量名()'
<button onclick='fn()'>这是个按钮</button>
...
...
function fn(){alert('李在淦神魔？')}

    [on类绑定的弊端：对于同类事件，元素只能绑定一个 如同个div不能绑定两个onclick]

2. addEventListener()方法 绑定

// 事件源.addEventListener('参1',参2,参3)
// 参1 指定事件类型   参2 指定事件处理程序   参3 指定事件是否在捕获阶段执行 可选项 默认值 false
window.addEventListener('keyup', function () {
    alert(234)
})

事件的解绑

// 1. 事件源.removeEventListener('参1',参2)
// 参1指定 事件类型    参2指定 事件处理程序

案例：
// 鼠标按下事件 嵌套鼠标移动
// 但按下事件结束后 鼠标移动事件仍在执行
window.onmousedown = function () {
    window.addEventListener('mousemove',mouseMove)
}
function mouseMove() {
    console.log(342);
}

// 鼠标抬起时 解绑鼠标移动事件
window.onmouseup = function () {
    window.removeEventListener('mousemove', mouseMove)
}

// 缺点：只能与addEventListener配套使用 不能解绑on类绑定

// 2. 利用on类绑定不能重复的特性 通过事件源.on事件类型 = null 来覆盖原有事件

window.onmousedown = function () {
    window.onmousemove = function () {
        console.log(342);
    }
}

window.onmouseup = function () {
    window.onmousemove = null
}
// 只能用于on类绑定

// 3. 创建开关 通过判断开关的布尔值 控制事件的触发与否

// 1. 开关key初始 = true --- 允许触发嵌套事件
var key = true
window.onmousedown = function () {
    // 3. 外层事件再次触发时 key = true --- 允许触发嵌套事件
    key = true

    window.onmousemove = function () {
        // 判定条件放在嵌套事件内部 控制嵌套事件能否触发
        if (key === false) {
            return
        }
        console.log(342);
    }
}

// 2. 外层事件结束时 key = false --- 不允许触发嵌套事件
window.onmouseup = function () {
    key = false
}

// 更泛用 但需要思考条件

事件对象

浏览器为 事件 提供的一个对象 记录了事件的各种具体信息
window.event
兼容写法： [低版本IE]

// 该内容为 事件处理程序
function(e){
    var ev = e || window.event
}

常用的 事件对象的 属性

1. 鼠标按键信息
   e.button --- num
       [0 --- 左键 1 --- 滚轮 2 --- 右键]
2. 按键码
   e.keyCode --- num
       [兼容低版本 火狐 写法：e.which]
       常用的按键码：
           回车键：13
           shift键：16
           ctrl键：17
           alt键：18
           空格键：32
           WIN键：91
           方向键 左上右下：37 38 39 40
           数字 和 字母 的按键码是对应的 阿斯克码
   --------------------------------------------------
3. 从 事件源内部 开始计算的 鼠标的坐标
   e.offsetX    e.offsetY --- num
4. 从 当前浏览器 窗口 开始计算的 鼠标的坐标
   e.clientX    e.clientY --- num
       [不会 随滚动条的滚动而改变]
5. 从 当前浏览器 页面 开始计算的 鼠标的坐标
   e.pageX    e.pageY --- num
       [会 随滚动条的滚动而改变]
   --------------------------------------------------
6. 在触发事件时是否按住WIN键
   e.metaKey --- boolean
7. 在触发事件时是否按住alt键
   e.altKey --- boolean
8. 在触发事件时是否按住ctrl键
   e.ctrlKey --- boolean
9. 在触发事件时是否按住shift键
   e.shiftKey --- boolean
   --------------------------------------------------
10. 获取精准的事件目标元素dom对象
    e.target
        [常用场景：事件委托]
        [经典组合：e.target.nodeName e.target.innerText进一步筛选dom对象]
11. 获取从 页面加载完毕 到 事件触发 为止的 时间戳
    e.timeStamp --- num
12. 获取事件冒泡过程经过的元素
    e.path --- array
        [例：[div(事件源),body,html,document,Window] ]
    --------------------------------------------------
    仅针对鼠标移动事件
13. 获取 相较 上次移动事件 鼠标在 x轴 坐标的 变化
    e.movementX --- num
        [左移：(-1) ~ (-2)]
        [右移：1 ~ 2]
14. 获取 相较 上次移动事件 鼠标在 y轴 坐标的 变化
    e.movementX --- num
        [上移：(-1) ~ (-2)]
        [下移：1 ~ 2]

阻止事件冒泡

1. e.stopPropagation()
2. e.preventDefault()
3. e.cancelBubble = true
       [方法3为兼容低版本IE]
4. e.returnValue = false
5. return false

事件委托

原理：通过事件源 冒泡 ，可以让 多个不同事件 的 绑定，由 同个 父元素 来完成
优点：
    1. 提高绑定事件的效率
    2. 动态添加的子标签也具备事件