深入事件

事件类型：

鼠标事件：

    onclick 点击事件  = onmousedown + onmouseup
    ondbclick  双击事件
    onmousedown   鼠标按下去
    onmouseup   鼠标抬起来
    onmouseover   鼠标移到某元素上面
    onmouseout   鼠标离开某元素上面
    onmousemove   鼠标在元素上面的移动
    ....

键盘事件： 基本上没什么用 网络小游戏

    onkeydown  键盘按下去
    onkeyup  键盘抬起来
    onkeypress  键盘抬住
加载事件：
    load 加载    当DOM元素加载完毕就触发   事件源是window
    unload 加载    退出页面  此事件不好捕获到  也没有什么用
表单事件：
   focus: 获取焦点
   blur: 失去焦点
   change: 改变输入框中的内容，并失去焦点时触发
   submit: 当点击了提交按钮，会触发submit事件
   reset: 当点击了重置按钮，会触发reset事件
其它事件：
    resize: 改变了浏览器窗口大小时，会触发resize事件
    scroll: *** 页面滚动时，会触发scroll事件
    ....

---

事件的三要素：

1）事件源   事件发生的场所
2）事件类型
3）事件处理程序（监听器）  是一个函数  不是我们调用的，是浏览器帮我们调用的

---

事件绑定：

1）html级别的事件绑定
2）DOM0级别的事件绑定
3）DOM2级别的事件绑定

---

html级别的事件绑定： 基本上不用

<button onclick="alert('你好~')">登录</button>
不足：结构和行为混在一起（耦合），不方便维护，尽量不要使用

---

DOM0级别的事件绑定：

核心：基于DOM对象中的onclick属性
btn.onclick = function () {
    console.log("点我~")
}
基于DOM0级别的事件绑定，如果绑定了多个监听器，会发生覆盖，原因是DOM0级别的事件绑定是基于属性赋值。
    btn.onclick = function () {
        console.log("点我1~")   不会执行
    }
    btn.onclick = function () {
        console.log("点我2~")  会执行
    }

---

DOM0级别的事件解绑：

btn.onclick = null;

代码：

window.onload = function () {
    let btn = document.getElementById("btn");
    let unbind = document.getElementById("unbind");
    console.dir(btn)
    btn.onclick = function () {
        console.log("点我干啥~")
    }
    unbind.onclick = function () {
        btn.onclick = null; // 解绑
    }
}

---

DOM2级别的事件绑定：

btn.addEventListener("click",function () {
    console.log("点我干啥1~")
})

特点：

    1）可以绑定多个监听器，原因是它是基于事件池的。 推荐大家，以后使用DOM2级别的事件绑定

---

DOM2级别的事件解绑：

   1）removeEventListener  
   2）要解绑，必须是监听器抽离出去
window.onload = function () {
        let btn = document.getElementById("btn");
        let unbind = document.getElementById("unbind");
        // 要解绑，必须是监听器抽离出去
        let handler = function(){
            console.log("点我干啥~")
        }
        btn.addEventListener("click",handler)
        unbind.addEventListener("click",()=>{
            // 解绑btn上面的click事件
            btn.removeEventListener("click",handler)
        })
    }

---

IE低版本事件的绑定和解绑：不说了 也不用

---

事件传播：

如果有元素的嵌套，给这些元素都绑定了事件，当触发了里面元素的事件，外面元素的事件也会被触发，
这个我们叫事件的传播机制。传播是有方向的，默认是从里外面，叫冒泡。可以改变传播的方向，变成
从外向里，从外向里叫捕获。

---

有时候，我们需要阻止事件冒泡：

通过事件对象中的一个api。

---

事件对象：

事件对象也是一个对象，对象是属性的无序集合。其中有一个属性就可以阻止事件冒泡。

---

有些标签是有默认事件，很多标签，我们先说两个：
1）a标签  默认就可以点击
2）form标签  默认就可以提交

---

阻止a标签的默认事件：

1）在监听器中最后 return false;
2）利用事件对象来阻止  e.preventDefault();
3）JS协议的形式   <a href="javascritp:;">跳转</a>

---

form标签：

1）在监听器中最后 return false;
2）利用事件对象来阻止  e.preventDefault();

---