数据库 微服务 北斗系统 TCP连接 云计算架构 ruby templates pip ftp vue绑定class vue网页 vue教程入门 vue样式 网赚教程下载 pmp教学视频 html好看的字体 git下载代码到本地命令 windows查看进程命令 input边框颜色 python教程 python文件操作 javafile 搭建java开发环境 java的map php开发实例 pascal教程 服务器操作系统下载 网络适配器驱动 allowoverride 灼热峡谷 狮子狗出装 音频频谱分析软件 html特殊符号 flash制作工具 list删除指定元素 爱奇艺无法投屏 目标聚光灯 易语言皮肤模块 proxies centos配置ip
当前位置: 首页 > 学习教程  > 

原生js事件委托

2020/10/16 18:03:48 文章标签: 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_300352.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?