JS —— 事件 Event

绝地灬酷狼 2022-06-06 03:49 388阅读 0赞

Web API Event接口：[https://developer.mozilla.org/zh-CN/docs/Web/API/Event][https_developer.mozilla.org_zh-CN_docs_Web_API_Event]

**目录：**

一、Event 接口简介

二、事件源（target）与事件（event）

三、事件监听器（eventListener）

四、创建事件与自定义事件实践

五、绑定事件监听器实践

**一、Event 接口简介**

Event 接口是页面中所有事件的直接或间接父接口，表示在DOM 中发生的任何事件。具体有哪些事件可以参考上面的Web API Event 接口，如MouseEvent 子接口提供了几个常用事件：click、dblclick、mousedown等。

**二、事件源（target）与事件（event）**

此处事件源用target而不要eventSource，但两者含义相同。事件源即触发该事件的元素，如点击按钮事件的target即为该按钮。事件（event）不用解释，就是指某个行为，event 对象通常不需创建，某个行为产生（如点击按钮）时，API 就会自动创建一个点击事件。

**三、事件监听器（eventListener）**

监听器即事件处理函数，是我们关注的焦点。为某个**事件源**的某个**事件**绑定**事件监听器**的三种方式：

方式一：元素 属性

说明：事件源：button；事件：click；事件监听器：functionName函数

方式二：DOM 属性

document.getElementById("eleId").οnclick=functionName;

方式三：addEventListener 或attachEvent

if(window.addEventListener){
        eleDom.addEventListener("click",listener[,options]);//注意事件名不带on
    }else{
        eleDom.attachEvent("onclick",listener[,options]);
    }

说明：

1、listener 参数：为实现了EventListener 接口的对象或函数（可以传入该事件，但事件必须作为第一个参数）；

2、options 参数：可选。有2中主要形式，形式1：

target.addEventListener(type, listener [,{capture: Boolean, once: Boolean, passive: Boolean}]);

options 选项说明：

capture ：是否在捕获阶段执行该事件，默认false；

once，是否只执行一次，默认false；

passive：是否永远不能执行preventDefault()，默认false，当为true时，调用该函数将没效果。

形式2：

target.addEventListener(type, listener[, useCapture]);

userCapture：boolean，默认false。表示是否使用捕获方式传送事件，当设置为true 时，其子元素中事件冒泡传送到当前元素时，当前元素的对应该事件不会触发，相当于对元素忽略了冒泡过程。

**关于事件传送的3个阶段：**

捕获阶段（capture phase）：事件从window到docuemnt 逐级传到target元素；

目标阶段（target phase）：事件传到target元素，执行该元素的该事件处理函数，开始冒泡阶段；

冒泡阶段（bubble phase）：事件从target元素以捕获阶段相反的顺序传播，直到window。

过程图：

![Center][]

解除事件监听器绑定：

target.removeEventListener("click",funcitonHandler).

**四、创建事件与自定义事件**

事件是不需要手动创建的，但也在此简单实践下。

实践目标：

点击一个按钮，为一个div创建一个自定义事件（名字为myEvent），监听到该事件后随机改变该div背景颜色。

代码：

<!DOCTYPE html>
    <html>
    <head>
    	<title>创建事件</title>
    	<meta charset="utf-8">
    	<script type="text/javascript">
    		function changeColor(){
    			var random = Math.random();
    			document.getElementById("test").style.backgroundColor = "#"+parseInt(random*1000);
    		}
    		function createEvt(){
    			//创建已有类型的事件，如鼠标事件
    			//var event = new MouseEvent("Event");
    			//创建自己的事件
    			var event = document.createEvent("Event");
    			event.initEvent("myEvent",true,true);//定义事件名为myEvent
    			document.getElementById("test").dispatchEvent(event);//指派该事件到target
    		}
    		window.οnlοad=function(){
    			if(window.addEventListener){
    				document.getElementById("test").addEventListener("myEvent",changeColor);
    			}else{
    				document.getElementById("test").attachEvent("myEvent",changeColor);
    			}
    		}
    	</script>
    </head>
    <body>
    	<div id="test" style="width:200px;height: 100px;background-color: gray"></div>
    	<button οnclick="createEvt()">改变div颜色</button>
    </body>
    </html>

**说明：**

创建事件：感觉new Event("Event")与document.createEvent("Event")应该差不多，至于参数为什么是Event，暂时先不管。

指派事件：target.dispatchEvent(eventObj)，该方法有个返回值，boolean，当（该事件是可取消的，即cancelable为true）and（至少一个事件处理方法调用了event.preventDefault()）时返回false，否则返回true。

**五、绑定事件监听器实践**

可以参考[http://www.jb51.net/article/67051.htm][http_www.jb51.net_article_67051.htm]文章，主要总结两点：

1、通过dom属性（如ele.onclick）方式只能同时绑定一个事件处理函数，当绑定多个时，后面的会将前面的覆盖。

2、要绑定多个处理函数，可以通过addEventListener （或attachEvent）方式。

3、解除事件处理函数绑定：removeEventListener("click",functionHandler)。

4、阻止事件的capture、target、bubble阶段：event.stopPropagation()，即调用该方法后，事件将不在向上或向下传送，也不会执行当前元素之前绑定的事件处理函数（似乎是这样，暂时没空实践）。

[https_developer.mozilla.org_zh-CN_docs_Web_API_Event]: https://developer.mozilla.org/zh-CN/docs/Web/API/Event
[Center]: /images/20220606/47a8d322306e423988c3a1e54b1fb5d6.png
[http_www.jb51.net_article_67051.htm]: http://www.jb51.net/article/67051.htm