03/7
2017
我最近做了一个带下拉菜单的导航，学到了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标签。
