js target和currentTarget

target和currentTarget

最近做的项目遇到了这样一个问题：
select 标签在实际操作中并不灵活 ， 不光是它的样式想要修改很麻烦，用js或者Jquery来控制选中项也是麻烦的
具体体现在通过js操作选中项之前都会清空所有option的selected，不然即便是option已经设置了它的selected为true，但是select依然会选中DOM节点中第一个selected为true的option。技术有限，觉得这样做很麻烦，也出现了很多问题。

最后决定还是决定自己做个下拉框

html如下：

<div class="select_btn">
    <span class="select_tap" >农夫山泉</span>
       <ul class="select_drop">
          <li>怡宝</li>
          <li>农夫山泉</li>
          <li>营养快线</li>
          <li>脉动</li>
       </ul>
</div> 

css 如下：

* {
    padding:0;
    margin:0;
}
ul li {
    list-style: none;
}
.select_btn {
    position: relative;
    width: 150px;
    height: 22px;
    margin-top: 15px;
    display: inline-block;
    border-radius: 2px;
    background-color: #004c5d;
    color: deepskyblue;
}
.select_tap {
    width:100%;
    height: 100%;
    text-align: center;
    display: inline-block;
    color:#fff;
}
.select_drop {
    position: absolute;
    top: 20px;
    left:0px;
    z-index: 999;
    width:150px;
    text-align: center;
    border-radius: 2px;
    background-color: #006076;
    color:#fff;
}
.select_drop li {
    cursor: pointer;
}
.select_drop li:hover {
    background-color: #fff;
    color: #000;
    border-radius: 2px;
}

JS代码：

$(".select_btn").hover(function(e) {
    /* 鼠标悬浮事件 */
    console.log(e);
    if ( !$(this).is(":animated") ){
        $(e.target).find("ul").slideDown(150);
    }
}, function(e) {
    /* 鼠标离开事件 */
    if ( !$(this).is(":animated") ){
        $(e.target).find("ul").slideUp(150);
    }
});

代码不是很规范，刚学不久。

用JQuery初始化”.select_drop”的display为none，再通过”.select_btn”的mouseoer事件触发，让下拉框显示出来 。

但是这里就会出现一个问题：

不管鼠标在上面怎么移动都无法显示“.select_drop”。

---

在检查了js代码和CSS ，有如下2种解决办法：

---

- JS

其实这个问题是由于对触发事件接收的Event对象理解不透彻造成的。
打印一下这个接收的事件

就可以发现这个Event对象有除了有一个target属性，还有一个currentTarget属性

那target和currentTarget有什么区别呢 ？

比如说你让body监听鼠标点击事件，
在body里加一个有宽高的div，
这时你点击这个div。target就是div，currentTarget就是body。

一言以蔽之，currentTarget是事件的监听者，而target是事件的真正发起者

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

原文出自这里，里面用了几个例子表现了target和currentTarget的区别。

所以我们只需要把js代码中的target改成currentTarget就可以解决问题

---

- CSS

既然知道了target和currentTarget的区别，那我们让事件流处在目标阶段，两个的指向就可以一样
具体实现如下：

在chorme下查看元素发现”.select_tap”把“.select_btn”全部遮挡住了 ，这种情况下 “.select_tap”就会成为事件的真正发起者
接下来我就给“.select_btn”增加了1px的padding，同时设置box-sizing为 border-box;

这个时候就可以正常显示下拉框，将target和currentTarget的指向一致。

---

要点：
js事件流的理解
jquery的Event对象