Blogger Information
Blog 17
fans 0
comment 1
visits 15632
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
事件代理-2019年7月11日(作业一)
无名氏_连的博客
Original
657 people have browsed it

事件代理原理:

事件代理是根据事件冒泡:从事件的目标到HTML文档的层级触发原理思路进行编写。

关键字:

currentTaget:事件添加者

target:事件触发者

以下是事件代理小例子: 执行触发顺序  ul事件->body事件

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件代理</title>
</head>
<body>
	<ul>
		<li>aa</li>
		<li>bb</li>
		<li>cc</li>
		<span>dd</span>
	</ul>

	<script>

		var ul = document.getElementsByTagName('ul').item(0);//获取UL元素
		var bby = document.getElementsByTagName('body').item(0);//获取body元素
		// console.log(bby);		

		ul.addEventListener('click',list,false);
		function list(ev){
			console.log(ev.currentTarget);//事件添加者
			console.log(ev.target);//事件触发者
		}

		bby.addEventListener('click',tenm,false);
		function tenm(){
			alert('我是body');
		}
	</script>
	
</body>
</html>

运行实例 »


Correction status:qualified

Teacher's comments:事件代理, 看上去很简单, 其实有很多坑的, 一定要知道它的前提是什么, 并且不要滥用.....
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments