关于js函数重构的问题

今天在走获得焦点动作时，想着去重构一下获得和失去焦点的代码，重构前：

$(".searchInput").focus(function(){
		$(".search").css("width","320px");
		$(".searchInput").css({"width":"268px","border":"none","outline":"none"});
		$(".searchHidden").css("display","block");
		$(".searchbtn").css({"background-color":"#969696","color":"white"});
	});
	$(".searchInput").blur(function(){
		$(".search").css("width","240px");
		$(".searchInput").css({"width":"188px","border-style":"none"});
		$(".searchHidden").css("display","none");
	});

重构后：

$(".searchInput").focus(function(){
		changeInputDiv("320px","268px","block","#969696","white")
	});
	$(".searchInput").blur(function(){
		changeInputDiv("240px","188px","none","#eeeeee","#969696")
	});
	
	function changeInputDiv(width1,width2,display,bakcolor,color){
		$(".search").css("width",width1);
		$(".searchInput").css("width",width2);
		$(".searchHidden").css("display",display);
		$(".searchbtn").css({"background-color":bakcolor,"color":color});
	}

遇到的问题是：刚开始我直接这样子写，没有在为onfocus建立一个函数，所以解析器是直接调用了changeInputDiv函数，并不能表现出获得焦点和失去焦点的变化。没有点击时就已经调用了这个函数，而获得焦点和失去时就不再有反应。

$(".searchInput").οnfοcus=changeInputDiv("320px","268px","block","#969696","white");