博客列表 >事件代理-2019年7月11日(作业一)

事件代理-2019年7月11日(作业一)

无名氏_连的博客
无名氏_连的博客原创
2019年07月18日 14:00:29658浏览

事件代理原理:

事件代理是根据事件冒泡:从事件的目标到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>

运行实例 »


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议