13、DOM模型之事件操作

概要

1. 事件处理程序
   1. HTMl事件处理
   2. DOM 0级事件处理
   3. DOM 2级事件处理
2. 事件类型之鼠标事件
3. Event事件对象

   1、事件处理程序

   a、HTML事件处理程序

   ```javascript按钮1

function clickHandle() { console.log(“HTMl事件处理程序”); }

优点：书写简单<br />缺点：文件不分离，可复用性低
<a name="QYnyn"></a>
### b、DOM 0级事件处理
```javascript
<button id="btn2">按钮2</button>
var btn2 = document.getElementById("btn2");
btn2.onclick = function () {
    console.log("DOM 0级事件处理程序");
}
btn2.onclick = function () {
    console.log("DOM 0级事件处理程序2222");
}

优点：代码可分离，复用性高
缺点：事件会被覆盖

c、DOM 2级事件处理（推荐）

<button id="btn">按钮</button>
var btn = document.getElementById("btn");
btn.addEventListener("click", demo);
function demo() {
    console.log("DOM 2级事件处理程序");
}
btn.addEventListener("click", demo2);
function demo2() {
    console.log("DOM 2级事件处理程序222");
}
// 取消事件
btn.removeEventListener("click", demo2);

优点：事件不会覆盖
缺点：格式复杂

2、事件类型之鼠标事件

/**
 * click：按下⿏标时触发。
 * dblclick：在同⼀个元素上双击⿏标时触发。
 * mousedown：按下⿏标键时触发。
 * mouseup：释放按下的⿏标键时触发。
 * mousemove：当⿏标在⼀个节点内部移动时触发。当⿏标持续移动时，该事件会连续触发。
     为了避免性能问题，建议对该事件的监听函数做⼀些限定，⽐如限定⼀段时间内只能运⾏⼀次。
 * mouseover：⿏标进⼊⼀个节点时触发
 * mouseout：⿏标离开⼀个节点时触发
 */
<div class="box" id="box"></div>
var box = document.getElementById("box");
// 点击事件
box.addEventListener("click", function () {
    console.log("click点击事件");
});
// 双击事件
box.addEventListener("dblclick", function () {
    console.log("dbclick双击事件");
});
// 鼠标按下事件
box.addEventListener("mousedown", function () {
    console.log("mousedown鼠标按下事件");
});
// 鼠标释放事件
box.addEventListener("mouseup", function () {
    console.log("mouseup鼠标释放事件");
});
// 鼠标移动事件
box.addEventListener("mousemove", function () {
    console.log("mousemove鼠标移动事件");
});
// 鼠标滑进事件
box.addEventListener("mouseover", function () {
    console.log("mouseover鼠标滑进事件");
});
// 鼠标滑出事件
box.addEventListener("mouseout", function () {
    console.log("mouseout鼠标滑出事件");
});

3、Event事件对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的时间都是这个对象的实例。

<button id="btn">按钮</button>
var btn = document.getElementById("btn");
btn.addEventListener("click", function (event) {
    console.log("点击");
    event.target.innerHTML = "点击之后的按钮";
    console.log(event);
});