事件委托的例子

最新推荐文章于 2024-04-14 19:33:29 发布

源@

最新推荐文章于 2024-04-14 19:33:29 发布

阅读量247

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48727085/article/details/108237585

版权

<!DOCTYPE HTML>
<html lang = 'en'>
	<head>
		<meta charset = 'UTF-8'/>
		<title>Document1</title>
		<style>
			li{
				margin:10px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
		<script>
			var ul = document.getElementsByTagName('ul')[0]
			//这个函数的目的是让li标签打印自身得.innerHTML
			ul.onclick = function(e){
				var evt = e || event;
				//_target : 触发事件的元素
				var _target = evt.target || evt.srcElement;
				//_target.nodeName : 触发事件的元素的名称
				// _target.nodeName.toUpperCase() : 触发事件的元素的名称转化成大写字符串
				if(_target.nodeName.toUpperCase() == 'LI'){
					console.log(_target.innerHTML);
				}
			}
		</script>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

源@

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委托的例子

<!DOCTYPE HTML><html lang = 'en'> <head> <meta charset = 'UTF-8'/> <title>Document1</title> <style> li{ margin:10px; background-color:red; } </style> </head> <body> &lt
复制链接

扫一扫