开源商城系统 自承式光缆 Markdown编辑器 aircrack-ng api templates awk server 如何做网络营销推广 menu Backbonejs underscorejs bootstrap后台管理 photoshop cs3 教程 jquery去掉空格 mac脚本编辑器 js数组截取前5个 python高级教程 python打开文件夹 java环境安装 java语法 java文档 java格式化字符串 java字符 java读取文本 python 教程 coreldraw11 灼热峡谷 网站数据分析工具 一键换系统 电脑必备软件排行榜 苹果滚动截屏 蒙文字体 java疯狂讲义 御旌是什么 谷歌地球用不了 王者荣耀自动刷冒险 流水账软件 苹果手机总是自动重启 airdrop是什么
当前位置: 首页 > 学习教程  > 

原生js事件委托

2020/10/16 18:03:47 文章标签: js原生点击事件

之前面试的时候就被问过,什么是事件委托? 事件委托:给父元素绑定事件,用来监听子元素的冒泡事件。也就是事件目标(子元素)不处理事件,把事件委托给父元素去处理。 看下图理解事件冒泡&#xf…

之前面试的时候就被问过,什么是事件委托?

事件委托:给父元素绑定事件,用来监听子元素的冒泡事件。也就是事件目标(子元素)不处理事件,把事件委托给父元素去处理。

看下图理解事件冒泡:

事件委托的好处:不需要对每一个子元素绑定事件,只需要在父元素上绑定事件,减少了操作DOM节点的次数,从而减少浏览器的重加载,提高代码的性能。

因此当子元素较多,需要对子元素进行监听的时候,可以使用事件委托。

//原生js事件委托的例子,css部分可以忽略
<!doctype html>
<html>
<head>
	<style>
	ul{
		list-style: none;
		display: flex;	
	}
	ul li{
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: pink;
		font-weight: bold;
		border: 1px solid #eee;
	}
	ul li:hover{
		cursor: pointer;
	}
</style>
</head>
<body>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
<script>
	var ul = document.querySelector("ul");
	var li = document.querySelectorAll("li");
	ul.onclick = function(e){//e指event,事件对象
		var target = e.target || e.srcElement; //target获取触发事件的目标(li)
		if(target.nodeName.toLowerCase() == 'li'){//目标(li)节点名转小写字母,不转的话是大写字母
			alert(target.innerHTML)
		}
	}
</script>
</body>
</html>

W3C的定义
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
标准 Event 属性:target 返回触发此事件的元素(事件的目标节点)。
IE 属性:srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。


本文链接: http://www.dtmao.cc/news_show_300351.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?