mouseenter:当鼠标移入某元素时触发。
mouseleave:当鼠标移出某元素时触发。
mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。
mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发。
mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发。
mouseout、mouseover和mouseleave、mouseenter最大的区别,在于子元素连带触发
代码:
<!DOCTYPE html>
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
div {width:300px; height:200px; background-color:lightblue;}
</style>
</head>
<body>
<h2>jquery事件绑定</h2>
<div></div>
<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//① bind()事件绑定使用
//同一个对象绑定多个click事件
/*$(function() {
});*/
$(function(){
$('div').bind('click',function(){
console.log('谁在碰我11?');
});
$('div').bind('click',function(){
console.log('谁又在碰我?');
});
$('div').on('click',function(){
console.log('谁在碰我22?');
});
$("div").click(function() {
console.log('谁在碰我33?');
});
$('div').on('mouseenter',function(){
console.log('mouseenter');
//给div设置背景色
$(this).css('background-color','lightgreen');
//$('div').css('background-color','lightgreen');
});
$('div').on('mouseleave',function(){
console.log('mouseleave');
//this代表dom对象
//$(this)将dom对象封装成jQuery对象
//给div设置背景色
$(this).css('background-color','lightblue');
//$('div').css('background-color','lightgreen');
});
$('div').on('mouseover',function(){
console.log('mouseover');
$(this).css('background-color','lightgreen');
});
$('div').on('mouseout',function(){
console.log('mouseout');
$(this).css('background-color','lightgreen');
});
});
</script>
</body>
</html>
鼠标移入后:
鼠标移出后
鼠标再次移入并点击