JS —— 事件 Event

最新推荐文章于 2024-08-28 14:34:05 发布

Liekkas_BX

最新推荐文章于 2024-08-28 14:34:05 发布

阅读量858

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_19865749/article/details/78385573

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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 οnclick="functionName()">按钮</button>

说明：事件源：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。

过程图：

解除事件监听器绑定：

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文章，主要总结两点：

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

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

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

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