阿里校园招聘前端面试

　　2014年9月24日，怀着激动（必须是激动啊，第一次面试）的心情来到了杭州阿里安排的面试地点，进去签完到后就进入了休息室进行焦急的等待。等待了大概20分钟，就轮到我的面试了。进入了面试大厅，在工作人员（美女哟）的带领下，来到了面试我的面试官面前，跟他握个手后就叫我坐下了。

　　面试官第一眼看着就很友好，让我感觉也不是那么紧张了。首先作了个短暂的自我介绍，然后面试官就看我简历上的实习经验，让我说说项目上的事情。我就按照我的思路跟他说着我做的项目，中途他碰到感兴趣的东西，也会问点小问题。项目介绍完后，他问我平常都在哪学习前端知识，我说自己看书，网上看博客。我知道前端招聘挺看重能有自己的github项目和博客的，但我当时自己确实没有自己的小项目，他问我有没有自己写博客，我只能回答我平常有做笔记，有写博客的打算，很想分享自己的一些见解，和大家一起学习讨论（这也是我真实想法，所以今天就以这篇博客起手了），就这样跟面试官聊了一会儿后，他说这是前端面试，还是得问我点前端的东西。

　　接着他问我项目上用到了哪些前端技术，由于我实习的公司是给企业做后台开发的，前后台开发工作基本是一起的，所以真正前端用到的技术确实不牛，规范上也差了很多，维护起来较难，所以我就差不多如实说了（现在想想是不是不应该说太多实话），但说了自己会经常的去学习更深的知识，学习前端的新知识，当我我说到了项目上有mouseover事件，然后会弹出下拉框的地方，整个面试，前端技术问题主要就是这个问题了。

　　他问我当鼠标在几个菜单上快速移动时，怎样解决移动时不弹出下拉框，只到停留时才会弹出下拉框，55555555项目上没有实现这个功能，当时脑袋有点乱了，其实感觉想到了用setTimeout()，但没说出来，后来他先说出来了，我就只能认真听着了。最后还问道mouseover时可能会多次触发事件，问我怎么解决，我说有mouseenter()事件，哎，平常一直都是用jquery，js好多原生的都不会写。他就说这只是jquery的自己的方法，用原生的解决我也没回答好。

　　最后再聊了一些家常便饭的事情，整个过程感觉还是蛮轻松加愉快的，面试官对我印象貌似也还是不错的，但可能没达到他心目中的水平，因此没能让我进入前端的二面（PS. 面试官看我简历项目上有很多java后台的东西，最后居然反馈说建议去java再面试，虽然现在后台已经招完了，以后补招还不确定，但我还是要很感谢他，其他跟我一起如果没过一面的貌似都没这个待遇）。

　　感谢阿里给我的这次面试，让我人生又多了一份经历，我也感觉到面试其实也不是太恐怖，只要自己准备充分了，就和平常的聊天差不多。阿里这次前端还是有点可惜的，感觉是准备时间晚了，没有准备的太好，其实js、html5很多东西我都准备了，但这次面试都没有考到，而我忽略了一些基本的问题。今后要找出自己的不足，后面还有很多机会再等着我，加油吧，骚年！在此还要恭喜一下跟我一起去面试的实验室同学（志在成为前端大牛的人，以后要向他多学习学习，报他大腿了），他今天收到了阿里offer的通知。

 

回来后查阅资料，找出的mouseover多次触发的解决办法

为了阻止mouseover和mouseout的反复触发，这里要用到event对象的一个属性relatedTarget，这个属性就是用来判断mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时，relatedTarget属性代表的就是鼠标刚刚离开的那个节点，当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性，不过它有代替的属性，分别是fromElement和toElement。

 

var obj = document.getElementById(id); 
obj.onmouseover = fucntion(e) {
    var e = window.event || e ;  
    var s = e.fromElement || e.relatedTarget ;       
    if(this.contains){     
        if( !this.contains(s) ){     
            console.log('触发over');     
        }     
     }else{     
         var res= this.compareDocumentPosition(s) ;       
         if(!(s == this || res == 20 || res == 0 )){      
             console.log('触发over');     
         }       
     }    
}

obj.onmouseout = fucntion(e) {
    var e = window.event || e ;  
    var s = e.toElement || e.relatedTarget ;       
    if(this.contains){     
        if( !this.contains(s) ){     
            console.log('触发out');     
        }     
     }else{     
         var res= this.compareDocumentPosition(s) ;       
         if(!(res == 20 || res == 0 )){      
             console.log('触发out');     
         }       
     }  
}

 菜单栏连续滑动延迟处理，用setTiemout解决

var overtime,outtime;
$(selector).hover(function(){
    clearTimeout(outtime);
    overtime = setTimeout(function(){
        //some code
    },300);    
},function(){
    clearTimeout(overtime);
    outtime = setTimeout(function(){
        //some code
    },300);  
});