事件处理（1）—— 事件基础：事件流、绑定事件、注册与销毁事件、event对象、事件托管

最新推荐文章于 2024-06-23 08:00:00 发布

无知的小菜鸡

最新推荐文章于 2024-06-23 08:00:00 发布

阅读量564

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_41897680/article/details/106003358

版权

JavaScript 专栏收录该内容

35 篇文章 6 订阅

订阅专栏

事件基础

事件流
1、冒泡型（从内往外依次触发）
从最特定的目标向最不特定的目标（document对象）依次触发事件，也就是事件从下向上进行响应，这个过程被称为冒泡
示例文档包含5层div元素，为它们定义相同的click事件，同时为每层div标签定义不同的类名。当单击div标签时，设计当前对象边框显示为红色虚线，同时抓取当前标签的类名，以此识别每个标签的响应顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 20px;
				border: 1px solid blue;
				font-size: 18px;
			}
		</style>
	<script type="text/javascript">
		function bubble() {
			var div = document.getElementsByTagName("div")
			var show = document.getElementById("show")
			for (var i = 0; i < div.length; i++) { //遍历div元素
				div[i].onclick = (function(i) { //为每个div元素绑定单击事件
					return function() {
						div[i].style.border = '1px dashed red'
						show.innerHTML += div[i].className + "->"
					}
				})(i)
			}
		}
		window.onload = bubble;
		</script>
	</head>
	<body>
		<div class="div-1">div-1
			<div class="div-2">div-2
				<div class="div-3">div-3
					<div class="div-4">div-4
						<div class="div-5">div-5
						</div>
					</div>
				</div>
			</div>
		</div>
		<p id="show"></p>
	</body>
</html>

阻止事件冒泡

return function(event) {
		div[i].style.border = '1px dashed red'
		show.innerHTML += div[i].className + "->"
		event.stopPropagation()
    }

上述JavaScript代码等价于（jQuery代码）

$(function() {
	$('div').click(function() {
		$(this).css('border', '1px dashed red')
		$('#show')[0] += $(this)[0].className
		//return false;     //阻止事件冒泡
	})
})

2、捕获型（从外往内依次触发）
事件从最不特定的目标（document对象）开始被触发，最后到最特定目标，也就是事件从上往下进行响应
示例修改上述示例，使用addEventListener()方法为5个div元素注册click事件，在注册事件时定义响应类型为捕获型事件，即设置第3个参数为true

for (var i = 0; i < div.length; i++) { //遍历div元素
	div[i].addEventListener('click', (function(i) {
		return function() {
			div[i].style.border = '1px dashed red'
			show.innerHTML += div[i].className + "->"
		}
	})(i), true)
}

3、混合型
w3c的DOM事件模型支持捕获和冒泡型两种事件流，但是捕获事件流先发生，然后才发生冒泡型事件流。两种事件流触及DOM中所有层级对象，从document对象开始，最后返回document对象结束

绑定事件

<body>
     //静态绑定
	<button id="btn" onclick="alert('静态绑定')">按钮</button>
	<script type="text/javascript">
		//动态绑定
		var btn = document.getElementById("btn")
		/* btn.onclick = function() {
			console.log("动态绑定")
		} */
	</script>
</body>

注册事件与销毁事件
在DOM模型中，通过调用对象的addEventListener()方法注册事件

element.addEventListener(String type,Function listener,boolean useCapture)

type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有on前缀
listener：监听函数，即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个函数时，默认传递给他的唯一参数是event对象
useCapture：是一个布尔值。如果为true，则指定的事件处理函数将在事件传播的捕获阶段触发；如果为false，则事件处理函数在冒泡阶段触发

在DOM模型中，通过调用对象的removeEventListener()方法可用从指定对象中删除已经注册的事件处理函数

element.removeEventListener(String type,Function listener,boolean useCapture)

示例

<button type="button" id="a">点击</button>
<button type="button" id="b">删除</button>
<script type="text/javascript">
	var a = document.getElementById('a')
	var b = document.getElementById('b')

	function ok() {
		alert("欢迎光临！")
	}

	function remove_event() {
		a.removeEventListener('click', ok, false)
	}
	a.addEventListener('click', ok, false)
	b.addEventListener('click', remove_event, false)
</script>

removeElementListener()方法只能删除addEventListener()方法注册的事件。如果直接使用onclick等直接写在元素上的事件，将无法使用removeElementListener()方法删除

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

事件委托
事件委托，也称为事件托管，就是把目标节点的事件绑定到祖先节点上（原理：事件传播过程中，逐层冒泡总能被祖先节点捕获）
优点：优化代码。提升运行性能，防止在动态添加或删除节点的过程中注册的事件丢失

<ul id='list'>
	<li>列表项目1</li>
	<li>列表项目2</li>
	<li>列表项目3</li>
</ul>
<script type="text/javascript">
	var list=document.getElementById("list")
	list.onclick=function(event){
		console.log(event.target.innerText)
	}
</script>

关键点：
1、事件绑定在祖先元素上
2、event.target：返回事件的目标节点（触发该事件的节点），不能使用this（代替的是ul，而不是某一个li）

无知的小菜鸡

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
事件处理（1）—— 事件基础：事件流、绑定事件、注册与销毁事件、event对象、事件托管

事件基础事件流1、冒泡型（从内往外依次触发）从最特定的目标向最不特定的目标（document对象）依次触发事件，也就是事件从下向上进行响应，这个过程被称为冒泡示例文档包含5层div元素，为它们定义相同的click事件，同时为每层div标签定义不同的类名。当单击div标签时，设计当前对象边框显示为红色虚线，同时抓取当前标签的类名，以此识别每个标签的响应顺序<!DOCTYPE html><html> <head> <meta charset="ut
复制链接

扫一扫