DOM事件

一、注册事件（绑定事件）

1.概述

给元素添加事件，称为注册事件 / 绑定事件

注册事件有两种方式：传统事件方法和监听注册方法

2.传统注册方式

传统注册事件是利用on开头的事件，DOM 0级事件绑定方法

<button onclick = 'alert(点击了按钮)'>按钮</button>
/----------------------------------------/
<button>按钮</button>
const btn = document.querySelector('button')
btn.onclick = function(){
    alert('点击了按钮')
 }

传统点击事件的特点：注册事件的唯一性同一个元素，同一个事件只能设置一个处理函数，最后注册的处理函数将会前面的处理函数覆盖

3.监听注册方式

DOM 2即事件绑定方式

element.addEventListener(事件类型，事件处理函数) 方法

第一个参数：事件类型的字符串（直接书写，不需要加on，例："mousemove"）

第二个参数：事件处理函数，事件发生时，会调用该监听函数

监听注册方式的特点：同一元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数

二、删除事件

1.传统注册事件

例如：eventTarget.onclick = null

var btn = document.getElementById("btn");
// DOM 0级事件绑定方式
// 传统注册方式
btn.onclick = function () {
  alert(1);
};
// 解除绑定方法
btn.onclick = null;

2.监听注册方式

element.removeEventListener(事件类型，事件处理函数) 方法

        第一个参数：事件类型的字符串（直接书写” click” ，不需要加 on）

        第二个参数：事件函数引用名

注意：没有办法移出一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数

var btn = document.getElementById("btn");
// 绑定事件
btn.addEventListener("click", fun);
function fun() {
	alert(1);
	// 解除绑定
	btn.removeEventListener("click", fun);
}
// 点击按钮，只弹出一次1，点第二次不再弹出

三、DOM事件流

事件流描述的就是页面中接收事件的顺序、事件的流向

事件发生是会在元素节点之间按照待定的顺序传播，这个传播的过程就是DOM事件流

1.事件流的三个阶段

DOM事件流主要有三个阶段，分别是：

        第一阶段：事件捕获

        第二阶段：事件触发阶段

        第三阶段：冒泡阶段

事件捕获：是由DOM最顶层节点开始 ，然后逐级向下传播到具体的元素接收的过程

事件冒泡：事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层的节点的过程

<div id="father">
	<div id="son"></div>
</div>
<script>
	var father = document.getElementById("father");
	var son = document.getElementById("son");
	// 事件捕获
	father.addEventListener("click", f1, true);
   	son.addEventListener("click", f2, true);
    function f1() {
    	alert("father");
    }
    function f2() {
    	alert("son");
    }
	// 当点击 son 时，先弹出 father，再弹出 son
</script>

// 事件冒泡
father.onclick = function () {
  alert("father");
};
son.onclick = function () {
  alert("son");
};
// 当点击 son 时，先弹出 son，再弹出 father

需要注意的是：

（1）JS 代码中只能执行捕获 / 冒泡其中的一个阶段

（2）onclick 只能得到冒泡阶段

（3）addEventListener() 第三个参数为 false（或默认）时，事件冒泡

（4）addEventListener() 第三个参数为 true 时，事件捕获

（5）实际开发中很少用事件捕获，更关注事件冒泡

（6）有些事件是没有冒泡的，比如：onblur、onfocus、onmouseenter、onmouseleave

（7）事件冒泡有时会带来麻烦，有时又会很巧妙的帮助做某些事情

2.事件委托

事件委托也称事件代理、事件委派

事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点（即给父节点添加侦听器，利用事件冒泡影响每一个子节点）

事件委托的作用：只操作了一次DOM元素，提高了程序的性能

// 让每个小 li 被点击后，给当前的小 li 添加特殊的背景颜色，而其他兄弟不添加
// 事件委托：可以将一些子级的公共类型的事件委托给它们的父级添加，在父级内部想办法找到真正触发事件的最底层的事件源
// 获取 ul
var list = document.getElementById("list");
// 获取 ul 里所有的 li
var lis = list.children;
list.addEventListener("click", function (e) {
   	// 在内部要想办法找到真正触发事件的小 li
	// 借用事件函数内部的一个参数 e，e 是事件对象
    // e.target 属性记录的就是真正触发事件的事件源
    // 排除其他
 	for (var i = 0; i < lis.length; i++) {
    	lis[i].style.backgroundColor = "";
  	}
  	e.target.style.backgroundColor = "pink";
});

3.事件对象

我都没有对象，事件会有对象？那

1.什么是事件对象呢？

DOM元素，只要触发事件，就会有一个对象，它内部存储了与事件相关的数据

eventTarget.onclick = function (e) {}
eventTarget.addEventListener("click",function (e) {})
// 这里的 e 就是事件对象，也可以写成 event / evt

官方给出的解释：event对象代表事件的状态，比如键盘按键的状态、鼠标/键盘的状态、鼠标的位置等

简单的理解为：当事件触发后，跟事件相关的一系列信息数据的集合都会昂在这个对象里面，这个对象就是事件对象event，他有很多的属性和方法，可以在控制台打印出来看一下

上图为键盘按下事件的事件对象的部分的内容

2.事件对象的常见属性和方法

① e.eventPhase：查看事件触发时所处的阶段

    判断出事件执行时处于哪个阶段
    1：表示捕获阶段
    2：表示目标阶段
    3：表示冒泡阶段

② e.target：用于获取触发事件的元素

    标准，IE678 不识别
    获取真正触发事件的元素
    例如：点击了哪个元素，就返回哪个元素

③ e.srcElement：用于获取触发事件的元素

    低版本浏览器使用
    非标准，IE678 识别使用
    兼容性写法：var target = e.target || e.srcElement;

④ e.currentTarget：用于获取绑定事件的事件源元素

    IE678 无法识别
    和 this 非常相似，都指向绑定事件的事件源元素，一般都使用 this

⑤ e.type：获取事件类型

    比如：click、mouseover（不带 on）
    实际应用：可以将所有给一个元素绑定的事件的事件函数写在一个函数内，通过函数内部的 e.type 判断走不同的分支

// 鼠标经过变颜色，鼠标离开后恢复为原来的颜色色
box.onmouseover = fn;
box.onmouseout = fn;
function fn(e) {
  e = e || window.event;
  switch (e.type) {
    case "mouseover":
      box.style.backgroundColor = "pink";
      break;
    case "mouseout":
      box.style.backgroundColor = "skyblue";
      break;
  }
}

⑦ e.preventDefault()：取消默认行为

       DOM 标准写法，IE678 不识别

        比如不让链接跳转，不让提交按钮提交

⑧ e.returnValue：取消默认行为

        非标准，低版本浏览器使用

// 让 a 链接不跳转
a.onclick = function (e) {
	e = e || window.event;
    alert("hello world");
    // 普通的方式阻止默认行为
    // 只限于传统注册方式使用（没有兼容问题）
    // return false;

    // DOM 方法
    // 普通浏览器使用，IE678 不识别
    // e.preventDefault();
    // 低版本浏览器需要使用一个对象的属性
    e.returnValue = false;
};

四、阻止事件冒泡

e.stopPropagation();  阻止冒泡，标准方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <div class="son">son</div>
    </div>
    <script>
      const box = document.querySelector('.box')
      const son = document.querySelector('.son')

      son.addEventListener('click', function (e) {
        e.stopPropagation() // 阻止事件冒泡
        console.log('son')
        alert('son')
      })
      box.addEventListener('click', function () {
        console.log('box')
        alert('box')
      })
    </script>
  </body>
</html>

五、常用的鼠标事件

（1）常用的鼠标事件

contextmenu   禁止鼠标右键菜单

主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

// 禁止鼠标右键菜单
document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
});

selectstart    禁止鼠标选中

// 禁止鼠标选中
document.addEventListener("selectstart", function (e) {
    e.preventDefault();
});

（2）鼠标事件对象

        ① e.clientX/e.clientY

            鼠标距离浏览器窗口左上角的距离
            所有浏览器都支持

        ② e.pageX/e.pageY

            鼠标距离整个HTML文档页面左上顶点的距离，
            IE8 以前不支持

        ③ e.screenX/e.screenY

            鼠标距离电脑屏幕左上顶点的距离
            IE8 以前不支持

案例：图片跟随鼠标移动效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        /* css 代码 */
    * {
        margin: 0;
        padding: 0;
    }
    #pic {
        /* fixed 参考元素：浏览器窗口 */
        /* absolute 如果祖先都没有定位，参考body */
        position: fixed;
    }
    </style>

  </head>
  <body>
    <img src="../images/tianshi.gif" id="pic" />
    <script>
      var pic = document.getElementById("pic");
      // 通过鼠标移动事件给图片添加 left 和 top 的值
      // 给整个文档添加鼠标移动事件
      document.onmousemove = function (e) {
        e = e || window.event;
        var x = e.clientX;
        var y = e.clientY;
        // 给元素的 css 属性赋值
        pic.style.left = x - 50 + "px";
        pic.style.top = y - 40 + "px";
        // 鼠标默认显示在图片左上角
        // 其中 -50 和 -40 是减去图片长宽的一半，为了使鼠标显示在图片中心，
      };
    </script>
</body>
</html>

 六、常用的键盘事件

（1）常用键盘事件

        ① onkeyup

            某个键盘按键被松开时触发

        ② onkeydown

            某个键盘按键被按下时触发

        ③ onkeypress

            某个键盘按键被按下时触发
            但它不识别功能键（ctrl、shift、箭头等）

        注意：

            如果使用 addEventListener 不需要加 on
            三个事件的执行顺序是：keydown → keypress → keyup

（2）键盘事件对象

        ① key

            可以得到按的是哪个键
            比如：按下 a ，返回 a

        ② keyCode

            返回该键的 ASCII 值，是属性
            keyup 和 keydown 事件不区分字母大小写，例如：a 和 A 得到的都是65
            keypress 事件区分字母大小写，例如：a 97 和 A 65

document.addEventListener("keydown", function () {
	console.log("我按下了");
});
document.onkeyup = function () {
	console.log("我弹起了");
};

document.addEventListener("keydown", function (e) {
	console.log(e.keyCode); // 例如按键盘上的 a/A ,都返回 65
    // 可以利用 keyCode 返回的 ASCII 码值来判断用户按下了哪个键
    if (e.keyCode === 65) {
    	alert("您按下的a键");
    } else {
        alert("您没有按下a键");
    }
});

document.addEventListener("keypress", function (e) {
	console.log(e.keyCode); // 例如按键盘上的a得到97，A得到65
});
// 实际开发中，更多使用 keydown 和 keyup，它能识别所有的键（包括功能键）
// keypress 不识别功能键，但 keyCode 属性能区分大小写，返回不同的 ASCII 值