saber酱的抱枕

Fly me to the moon

03/7
08:00
学习

JavaScript中event.currentTarget的使用

我最近做了一个带下拉菜单的导航,学到了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的使用