ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 事件模型 事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。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); ~~~