JS--JavaScript使用event对象、event对象属性、方法和事件委托

最新推荐文章于 2024-08-09 16:54:24 发布

吴声子夜歌

最新推荐文章于 2024-08-09 16:54:24 发布

阅读量1.1k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript JSevent对象事件委托

本文链接：https://blog.csdn.net/cold___play/article/details/101472926

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

使用event对象

event对象由事件自动创建，代表事件的状态，如事件发生的源节点，键盘按键的响应状态，鼠标指针的移动位置，鼠标按键的响应状态等信息。event对象的属性提供了有关事件的细节，其方法可以控制事件的传播。

2级 DOM Events 规范定义了一个标准的事件模型，它被除了IE怪异模式以外的所有现代浏览器所实现，而IE定义了专用的、不兼容的模型。

在DOM事件模型中，event对象被传递给事件处理函数，但是在IE事件模型中，它被存储在window对象的event属性中
在DOM事件模型中，Event类型的各种子接口定义了额外的属性，它们提供了与特定事件类型相关的细节：在IE事件模型中，只有一种类型的event对象，它用于所有类型的事件。

DOM事件模型中event对象属性：

属性	说明
bubbles	返回布尔值，指示事件是否是冒泡事件类型。如果事件是冒泡类型，则返回true，否则返回false
cancelable	返回布尔值，指示事件是否可以取消的默认动作。如果使用preventDefault()方法可以取消与事件关联的默认动作，则返回值为true，否则为false
currentTarget	返回触发事件的当前节点，即当前处理该事件的元素、文档或窗口。在捕获和冒泡阶段，该属性是非常有用的，因为在这两个阶段，它不同于target属性
eventPhase	返回事件传播的当前阶段，包括捕获阶段（1）、目标事件阶段（2）和冒泡阶段（3）
target	返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口
timeStamp	返回事件生成的日期和时间
type	返回当前event对象表示的事件的名称。如“submit”、“load”或“click”

DOM事件模型中event对象方法：

方法	说明
initEvent()	初始化新创建的event对象的属性
preventDefault()	通知浏览器不要执行与事件关联的默认动作
stopPropagation()	终止事件在传播过程的捕获、目标处理或冒泡姐u但进一步传播。调用该方法后，该节点上处理该事件的处理函数将被调用，但事件不再被分派到其他节点

示例：禁止超链接跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com/" id="a1">禁止超链接跳转</a>
		<script>
			document.getElementById("a1").onclick = function(e){
				e = e || window.event;//兼容处理
				var target = e.target || e.srcElement;
				if(target.nodeName !== 'A'){//仅针对超链接起作用
					return;
				}
				if(typeof e.preventDefault === 'function'){
					e.preventDefault();//禁止默认行为
					e.stopPropagation();//禁止事件传播
				}else{
					e.returnValue = false;
					e.cancelable = true;
				}
			}
		</script>
	</body>
</html>

事件委托

事件委托（delegate），也称为事件托管或事件代理，简单描述就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式基于：事件传播过程中，逐层冒泡总能被祖先节点元素捕获。

示例：利用事件传播机制，在列表ul元素上绑定click事件，当事件传播到父节点ul上时，捕获click事件，然后再事件处理函数中检测当前事件响应节点类型，如果是li元素，则进一步执行下面代码，否则跳出事件处理函数，结束响应。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">添加列表项目</button>
		<ul id="list">
			<li>列表项目1</li>
			<li>列表项目2</li>
			<li>列表项目3</li>
		</ul>
		<script>
			var ul = document.getElementById("list");
			ul.addEventListener('click', function(e){
				var e = e || window.event;
				var target = e.target || e.srcElement;
				if(e.target && e.target.nodeName.toUpperCase() == "LI"){
					alert(e.target.innerHTML);
				}
			}, false);
			var i = 4;
			var btn = document.getElementById("btn");
			btn.addEventListener("click", function(){
				var li = document.createElement("li");
				li.innerHTML = "列表项目" + i++;
				ul.appendChild(li);
			});
		</script>
	</body>
</html>