获取当前点击的是哪个元素

最新推荐文章于 2024-03-25 20:26:08 发布

原创最新推荐文章于 2024-03-25 20:26:08 发布 · 1.5w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#web前端

JS 同时被 2 个专栏收录

7 篇文章

订阅专栏

2 篇文章

订阅专栏

用点击li元素为例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取当前点击的元素</title>
</head>
<body>
	<div id="btn">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script type="text/javascript">
		//第一种
		var doms = document.querySelectorAll('ul li');
		for (var i = 0; i < doms.length; i++) {
			!function(dom,index) {
				dom.addEventListener('click',function() {
					console.log(this.innerHTML);
				});
			}(doms[i],i);
		}
		//第二种   事件委托可以减少dom操作
		var doms = document.querySelector("ul");
		doms.onclick = function(e) {
			var ev = e || window.event;
			var target = ev.target || ev.srcElement;
			if (target.nodeName.toLowerCase() == 'li') {
				console.log(target.innerHTML);
			}
		}
		//第三种
		$('ul').on('click','li',function() {
			console.log(this.innerHTML);
		});
		//第四种
		$("li").click(function(e) {
			console.log(this.innerHTML);
		});
	</script>
</body>
</html>