事件注册 DOM事件流 事件对象（常用属性，方法） 事件委派（鼠标，键盘事件对象）

注册事件概述

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

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

传统注册方式：利用 on 开头的事件；例如：onclick；注册事件的唯一性，后面的注册事件会把前面的覆盖

方法监听注册方式：addEventListener()IE9+；IE9以前用 attacthEvent()代替；会按照注册顺序依次执行没有唯一性的问题

addEventListener() 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture]);
// 事件类型字符串，比如click，不用带on
// listener：事件处理函数
// useCapture：可选参数，是一个布尔值，默认false

解绑事件

// 1. 传统方式
eventTarget.click = null;
// 2. 监听方式移除
div.addEventListener(‘click‘, fn); // 这里的 fn 不需要调用所以不带括号
function fn() {
    // 要移除的事件以及要移除的事件函数
    div.removeEventListener(‘click‘, fn);
}

DOM事件流

事件流描述的是从页面中接收事件的顺序；

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

DOM事件流分为三个阶段：

• 捕获：document -> html -> body -> target
• 目标： target
• 冒泡：target -> body -> html -> document

有些事件是没有冒泡的，例如：onblur onfocus onmouseenter onmouseleave

onclick 和 attachEvent 只能捕获到冒泡阶段

<div class="father">
  <div class="son"></div>
</div>

var father = document.querySelector(‘.father‘);
var son = document.querySelector(‘.son‘);
// 当第三个参数为 true 的时候 表示是捕获阶段，此时会先触发 father 的 click 事件再触发 son 的；
father.addEventListener(‘click‘, function () {
  alert(‘father‘);
}, true);
son.addEventListener(‘click‘, function () {
  alert(‘son‘);
}, true);
// 当第三个参数为 false 或者为空，表示冒泡阶段，此时会先触发 son 的 click 事件再触发 father 的；
father.addEventListener(‘click‘, function () {
  alert(‘father‘);
}, false);
son.addEventListener(‘click‘, function (e) {
  alert(‘son‘);
  // 但是如果加了这个方法就会阻止事件冒泡行为
  e.stopPropagation();
});

事件对象

eventTarget.onclick = function (event) {};
eventTarget.addEventListener(‘click‘, function (event) {});

• event对象代表事件的状态，比如键盘按键，鼠标位置等；
• 事件发生后，跟事件相关的一些列数据的集合都放到了这个对象里面，包含了很多的属性和方法
• 这个 event 是一个形参，系统已经设定好的对象，不需要传递实参
• 存在兼容性问题 IE9+， IE6~8 window.event;

事件对象常用属性和方法

事件委托（代理，委派）

原理：不是每个子节点单独设置监听器，而是监听器设置在父节点中，然后利用冒泡原理影响设置每个子节点

比如给ul注册点击事件，然后利用事件的 target 来找到当前点击的 li，因为点击 li 会冒泡到 ul 上， ul有注册事件就会触发监听器；好处是只操作了一次DOM，提高程序性能；

鼠标事件对象

常用键盘事件

键盘事件对象

• keyup keydown 不区分字母的大小写，只返回大写的 ASCII
• keypress 区分大小写

原文地址：https://www.cnblogs.com/article-record/p/12593596.html