1.1 事件
事件：是可以被js检测到的行为，实质上是一种交互操作。
例如：我们可以给某按钮添加一个【onClick点击事件】，当用户对按钮发生点击时来触发某个函数。
事件的作用：
(1)各个元素之间可以借助事件来进行交互
(2)用户和页面之间也可以通过事件来交互
(3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）
ps：注意：事件通常与函数配合使用，当事件发生时函数才会执行。
1.2 事件传播/事件传递/事件流
一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段
第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）。
第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。
w3c规定：事件冒泡+事件捕获+事件真正的触发者等各个分支构成了js的事件机制。
ps：如没有特殊情况，均采用事件冒泡。
ps：HTML事件采用冒泡机制来处理事件。即
点击d2时会先执行d2的绑定事件（即执行test2函数）。
然后采用事件冒泡将事件传递给上一级DOM节点d1，然后d1执行自己的绑定事件。
ps：函数执行的顺序按照绑定事件时函数的顺序为准
HTML事件缺陷：耦合性太强了，修改一处另一处也要修改。
当函数没有加载成功时，用户去触发事件，则会报错。
2.2 DOM0级事件
在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。
语法：元素.on+事件名 = function(){需要执行的语句;}
例如：
btn.onclick = function () {console.log(‘按钮被点击’);};
ps：以冒泡机制来处理事件，不存在兼容的问题
DOM0级事件的移除方式：元素. on+事件名=null;eg:btn.οnclick=null;
2.3 DOM2级事件
在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。
语法：元素.addEventListener(type,listener,useCapture)
type:事件类型。【没有on！没有on！没有on！】
listener:监听函数，绑定的函数
useCapture:是否使用捕获机制。如果不写，默认值为false
false:冒泡机制
true：捕获机制
注意:DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。
DOM2级事件的移除方式： node.removeEventListener(type,外部函数名,useCapture)
eg：btn.removeEventListener('click',test,true);
ps：DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。
pss：第三个参数默认可以不写，默认是false。但是如果删除的是捕获事件，则必须写为true才可以。
3.IE浏览器中的【事件绑定】
(1)HTML事件处理程序：等同于非IE
(2)DOM0级事件：等同于非IE
(3)DOM2级事件：
在js脚本中，通过attachEvent函数绑定事件
语法：元素.attachEvent(type,listener)
type:事件类型。【有on！有on！有on！】 listener:监听函数，绑定的函数 注意:如果绑定多个函数，按照函数书写的倒叙执行。
IE下DOM2级事件的移除方式：
元素.detachEvent(type,listener) eg: function test() {alert(111);}
d1.attachEvent("onclick",test);
d1.detachEvent('onclick',test);
ps：匿名函数无法被移除。
4.解决浏览器中关于【事件绑定】兼容性问题
由于【IE浏览器中的事件绑定】和【非IE浏览器中的事件绑定】方式方法都有所不同。所以单一的某种函数都不能完美解决不同浏览器下的方法绑定问题。那么我们又应该如何面对在不同浏览器下【事件绑定】这个问题的解决方案呢？ 以下为解决方案的思路。绑定事件时： 如果能使用addEventListener方法绑定的，就采用本方法 否则采用attachEvent方法绑定
解绑事件时： 如果能采用addEventListener方法绑定的，就采用removeEventListener方法解绑 否则采用detachEvent方法解绑
var Event = {
addEvent: function (ele, type, handler) {
if (ele.addEventListener) {ele.addEventListener(type, handler);}
else if (ele.attachEvent) {ele.attachEvent('on' + type, handler);}
else {ele['on' + type] = handler;}
},
removeEvent: function (ele, type, handler) {
if (ele.addEventListener) {ele.removeEventListener(type, handler);}
else if (ele.attachEvent) {ele.detachEvent('on' + type, handler);}
else {ele['on' + type] = null;}
}
};
function test() {alert('点击事件');}
Event.addEvent(document.querySelector('div'), 'click', test);
5.鼠标事件
js鼠标事件是指通过鼠标一系列操作（如进入，点击等）来触发的事件。
(1)鼠标事件类型
鼠标单击是触发：click
鼠标双击是触发：dblclick
鼠标按下时触发：mousedown
鼠标抬起时触发：mouseup
鼠标移动时触发：mousemove
鼠标移入时触发(不冒泡)： mouseenter
鼠标移出时触发(不冒泡)： mouseleave
鼠标移入时触发(冒泡)： mouseover
鼠标移出时触发(冒泡)： mouseout
语法：元素.on+鼠标事件名称 = 调用函数
例如：d1.ondblclick = function () { console.log('这是d1');};
(2)鼠标事件原则
a.鼠标的基本事件默认采用冒泡传递
b.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响
c.mouseenter和mouseleave两个事件不冒泡触发。
来源：CSDN
作者：程序员DD
链接：https://blog.csdn.net/zgz102928/article/details/104088899