这个页面鼠标移入移出的效果是昨天写完的，在网上也参考了一些例子，甚至看到了用了数学的点与点之间的距离做的（佩服.gif），数学小白的我还是放弃那种做法，今天来总结下这里思路和过程。

首先，会介绍到事件委托：
简单点说就是浏览器绑定事件通过冒泡或捕获机制来向上，向下传播事件。将一个元素的事件，委托给另外一个元素来执行这个事件。

效果图

这里你可以看成是一个ul 多个li理解，我是直接用的elementUI 中的布局；这里先讲讲思路，这样后面代码，逻辑看着才不会懵逼，大牛除外。

思路

1：给li绑定鼠标移入移出事件
2：获取鼠标移入的位置（有用）,例:(x,y)
3：获取图片距离浏览器的位置（有用），top，left，height+top,left+width看到这个你们应该就理解了
4：将鼠标坐标与图片距离浏览器的位置相减，例如 x-top,x-(height+top)…等等后面详细讲
5：通过差值获取到最小值，这个最小值就是判断从那个方向移入移出的关键
6：获取到了方向，就开始释放你的想象写想要的动画吧

接下来就按照思路一步一步分析，往下走起。

1：给所有li绑定事件

这里我就想问问大家，你们如果要给ul下面的所有li绑定事件，你们会用什么？
1：for循环（直接了当，性能杀手，不用）

var Li = document.getElementsByTagName('li');
for (var i = 0,j = Li.length;i<j;i++) {
		Li[i].index = i                     // 将每次的i存入到li[i]定义的自定义变量index中
		Li[i].onmouseenter= function (){
			console.log(this.index)
	    }
}

2：forEach（和for差不多，作用与数组，不用）

var Li = document.getElementsByTagName('li');
[].forEach.call(Li,function (ele,index){   //由于这里的li是伪数组，所以不能使用forEach需要使用到call达到效果
		ele.onmouseenter=function (){
			console.log(1)
		}
})

3：事件委托（减少性能消耗）

var Box = document.getElementById('box')  
oBox.addEventListener('mouseenter',function (e){    //给li的父元素绑定时间，然后通过捕获将事件传播
	if (e.target.tagName.toLowerCase() == "li") {
		  console.log(1)
		}
},true)

这里的element.addEventListener(event, function, useCapture)当第三个参数为false的时候为冒泡阶段，为true时候是捕获阶段，这里是要通过li的父级，所以这里要设置为true
虽然三种方法都可以将事件绑定到li上，考虑到性能，决定使用事件委托的方式来实现。

这里我将文章分为了两部分，可以通过下面的传送门去到第二部分，是怕文章太长，没有耐心看（说的我自己以后回顾的时候）

传送门：详解判断鼠标从四周移入移出的方向（二）