鼠标移入移除事件的一点小思考

　　最近项目中有个小需求，需要对一个div做上传图片的效果，当鼠标移入div时提示图片显示，当鼠标移除div时提示图片隐藏，我的实现方案如下：

<form>
	<div class="file-list">
		<div class="list-img">
			<div class="cover"></div>
			<img src="img/plus.png" />
			<input type="file" class="file" id="file1">		
			<p>上传标题图片</p>
		</div>
	</div>
</form>

//鼠标进入事件
var enterFun=function(){
	$(this).find('.cover').css('display', 'block');
	$(this).find('img').css('display', 'block');
	$(this).find('p').css('display', 'block');
	$(this).find('input').css('display', 'block');
}

//鼠标移除事件
var outFun=function(){
	$(this).find('.cover').css('display', 'none');
	$(this).find('img').css('display', 'none');
	$(this).find('p').css('display', 'none');
	$(this).find('input').css('display', 'none');
}

//鼠标移入事件
$(".file-list").find(".list-img").each(function(i,el){
	$(el).on("mouseenter",enterFun);
})
					
//鼠标移出事件
$(".file-list").find(".list-img").each(function(i,el){
	$(el).on("mouseleave",outFun);
})

 html中的<form>标签和<input type="file"/>是为了后面的上传图片，<div class="cover">标签是用来做背景蒙版的，<img src="img/plus.png" />是添加图片的标记图片。代码这样写，毫无疑问是可以完成任务的，但关键是重写了很多相同的代码，我希望能做一下简单的提炼，减少代码的重复，目前把js代码修改如下：

var mouseFun=function(event){
	var display="none";
	if (event.data.type=="enter") {
		display="block";
	} 
	$(this).find('.cover').css('display', display);
	$(this).find('img').css('display', display);
	$(this).find('p').css('display', display);
	$(this).find('input').css('display', display);
}

//绑定事件
$(".file-list").find(".list-img").each(function(i,el){
　　$(el).on("mouseenter",{type:"enter"},mouseFun);
　　$(el).on("mouseleave",{type:"leave"},mouseFun);
})

 在此过程中有几个知识点希望记录一下：

1.mouseover和mouseenter事件的区别：
　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
　　只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave   

2.jquery中on函数绑定带参函数，参数作为对象绑定在event.data上，想获取参数，必须通过event.data来获取。