js获取当前点击的div的自定义属性

js获取当前点击的div的自定义属性

HTML结构如下：

 	<div class="content-left-nav">
	    <div data-value="1" class="active-yscy-left">能源工业</div>
	    <div data-value="2" class="">石油化工</div>
	    <div data-value="3" class="">有色冶金</div>
	    <div data-value="4" class="">装备制造</div>
	    <div data-value="5" class="">中医中药</div>
	    <div data-value="6" class="">文旅康养</div>
	    <div data-value="7" class="">通道物流</div>
	    <div data-value="8" class="">数据信息</div>
	    <div data-value="9" class="">现代农牧</div>
	    <div data-value="10" class="">基础建设</div>
	</div>

点击某行js获取到该行的data-value值

js代码：

$('.content-left-nav').find('div').click((event)=>{
	console.log($(event.target).attr('data-value'))
	//点击后可以打印出该行的data-value值
	//重点为event.target，后面详细讲解
})

关于JQuery中this和event.target的区别如下：

1、js中的事件会冒泡，因此无法确定到点击的dom元素上，

但是event.target不会更改，它始终指向触发事件本身的DOM元素；

2、假设htm是

</ span> </ div>，单击span时，更改span的颜色。

如果使用this按钮单击span，则由于事件起泡机制，div将更改颜色。

但是使用event.target就不会。