事件模型 · Web前端(打印用)

## 事件模型事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。DOM支持大量的事件。 ### 1. EventTarget接口 DOM的事件操作（监听和触发），都定义在EventTarget接口上。Element节点、document节点和window对象，都部署了这个接口。该接口有三个重要的方法： * addEventListener：绑定事件的监听函数 * removeEventListener：移除事件的监听函数 * dispatchEvent：触发事件 1. addEventListener 该方法用于在当前节点或对象上，定义一个特定时间的监听函数示例 ~~~javascript // 语法：target.addEventListener(type,listenerFunc,false); window.addEventListener("load", function(){ alert("hello listener"); }); document.getElementById("btn2").addEventListener("click",function(){ alert("hello, button"); }); ~~~ > type：事件的名称，大小写敏感 > listenerFunc：监听函数，事件发生时，会调用这个函数 2. removeEventListener() 移除addEventListener方法添加的事件监听函数 ~~~javascript var btn2Click = function() { alert("hello, button"); }; document.getElementById("btn2").addEventListener("click", btn2Click); document.getElementById("btn3").addEventListener("click",function(){ document.getElementById("btn2").removeEventListener("click",btn2Click); }); ~~~ 3. dispatchEvent()：一般不怎么使用 ### 2.监听函数监听函数是事件发生时，程序所要执行的函数。它是事件驱动编程模式的主要编程方式。在DOM中提供三种方法为事件绑定监听函数。 1. HTML标签的on-属性 HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。 ~~~ <body onload="alert('hello');alert('world');"> </body> ~~~ 2. Element节点的事件属性 Element节点对象有事件属性，同样可以指定监听函数。 ~~~javascript var btn4Func = function() { alert("hello"); }; document.getElementById("btn4").onclick = btn4Func; ~~~ 3. addEventListener方法 ### 3.事件的种类 **鼠标事件** 鼠标事件是指与鼠标操作相关的事件 click事件、dblclick事件 mouseup事件（释放按下鼠标时触发）、mousedown事件（按下鼠标键时触发）、mousemove事件（鼠标在某个节点内部移动时触发） mouseover事件、mouseenter事件都是鼠标进入一个节点时触发，区别是mouseenter只执行一次，而mouseover会在子节点上触发多次。 ~~~javascript document.getElementById("ul1").addEventListener("mouseenter", function(event){ event.target.style.color = "red"; }); ~~~ mouseout事件、mouseleave事件都是鼠标离开节点时触发，mouseout事件会冒泡，mouseleave事件不会。 contextmenu事件（节点上点击鼠标右键时触发或者按下上下文菜单键时触发） **事件冒泡和捕获** 事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。 ![](https://box.kancloud.cn/b80d7800bf4876cf0344dadaac283030_329x173.png) ~~~ <div id="myDiv"></div> var div=document.getElementById("myDiv"); console.log(div); div.onclick=function(event){ alert("div"); }; document.body.addEventListener("click",function(event){ alert("event bubble"); },false); document.body.addEventListener("click",function(event){ alert("event catch"); },true); ~~~