Saber 酱的抱枕

我最近做了一个带下拉菜单的导航，学到了event.currentTarget的使用。

demo如下：

代码：

<nav>
	<ul>
		<li class="lelve1">
			<a href="">下拉菜单</a>
			<div class="subNav">
				<a href="">企业简介</a>
				<a href="">发展历程</a>
				<a href="">主营业务</a>
			</div>
		</li>
	</ul>
</nav>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	var isHover=false;
	$(".lelve1").mouseenter(
		function (event) {
			isHover=true;
			$(this).find(".subNav").fadeIn();
			//$(event.currentTarget).find(".subNav").fadeIn();
		}
	);
	$(".lelve1").mouseleave(
		function (event) {
			isHover=false;
			var a=$(this);
			setTimeout(function () {
				if (!isHover) {
					a.find('.subNav').fadeOut();
					//$(event.currentTarget).find(".subNav").fadeOut();
				}
			},50)
		}
	);
</script>

因为鼠标进入、鼠标离开事件都是绑定在一级导航上的，所以操作子导航的显示、隐藏时，都是通过在一级导航的元素里寻找子元素达到的：

$(this).find(".subNav").fadeIn();
a.find('.subNav').fadeOut();

这时都是使用this来指代一级导航，但除了使用this，还有另一个办法，就是使用event.currentTarget。

那event.currentTarget是什么呢？event.currentTarget指向事件所绑定的元素。

我们的鼠标进入、鼠标离开都是绑定在一级导航上，所以event.currentTarget所指向的元素始终是一级导航，使用起来很方便，而且可靠。

this在多层事件函数嵌套时经常会发生改变。但如果使用event.currentTarget的话，在这个作用域链里，event.currentTarget都不会变。所以我觉得event.currentTarget更方便可靠。

ps：event的属性里有一个大概比event.currentTarget更常用的，是event.target，指向触发该事件的元素。

event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素。

以前我有个错误的认知，以为哪个元素绑定的事件，那么触发事件的元素也是这个元素。其实不是的，像本例，当鼠标从子导航上离开时，触发一级导航mouseleave事件的元素（event.target）是a标签，而不是一级导航li标签。

JavaScript中event.currentTarget的使用