<body>
<input type="text" value="" />
<div style="width:100px; height:100px; background-color:#0E0">
<div style="width:50px; height:50px; background-color:blue"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(e) {
//mouseover,mouseout
//mouseenter,mouseleave 效果差不多，只不过enter和leave 对子元素无效,over和out 会触发子节点
$('input').keydown(function(e){
alert(e.keyCode);
})
$('input').keypress(function(e){
alert(e.charCode);
})
$('input').focus(function(){
alert('光标激活');
})
$('input').blur(function(){
alert('光标离开');
})
//focus和blur必须是当前元素才能激活,focusin和focusout可以使子元素激活
$('div').hover(function(){
$(this).css('background','red');
},function(){
$(this).css('background','green');
})//hover结合了mouseenter和mouseleave方法，而不是over和out方法
});
</script>
来源：https://www.cnblogs.com/Itwonderful/p/5706795.html