摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
a1=1,a2=1,a3=1,a4=1,a5=1,a6=1;a7=1,a8=1,a9=1;
$(document).ready(function(){
$('div.over').mouseover(function(){
$('.over span').text(a1++);
})//不論鼠標指針穿過被選元素或其子元素，都會觸發(fā) mouseover事件。
$('div.enter').mouseenter(function(){
$('.enter span').text(a2++);
})//只有在鼠標指針穿過被選元素時，才會觸發(fā)mouseenter 事件。
$('div.leave').mouseleave(function(){
$('.leave span').text(a3++);
})//只有再鼠標離開被選元素時，才會觸發(fā)mouseleave的事件。
$('div.move').mousemove(function(){
$('.move span').text(a4++);
})//不論鼠標指針在被選元素或其子元素上移動，都會觸發(fā)mousemove事件。
$('div.out').mouseout(function(){
$('.out span').text(a5++);
})//不論鼠標指針在被選元素或其子元素上離開，都會觸發(fā)mouseout事件。
$('div.down').mousedown(function(){
$('.down span').text(a6++);
})//不論鼠標指針在被選元素或其子元素上按下，都會觸發(fā)mousedown事件。
$('div.up').mouseup(function(){
$('.up span').text(a7++);
})//不論鼠標指針在被選元素或其子元素上松開，都會觸發(fā)mouseup事件。
$(window).resize(function(){
$('.resize span').text(a8++);
})//當調(diào)整當前瀏覽器窗口大小時,會觸發(fā)resize事件
$(document).mousemove(function(a9){
$('.weizi span').text('x坐標：'+a9.pageX+'/'+'y坐標：'+a9.pageY);
})//當前鼠標移動的坐標位置
})
</script>
<div class="over" style="width: 30%;background-color: #ccc;float: left;padding: 50px">
<h2 style="background-color: white">鼠標移動上去 mouseover事件觸發(fā)次數(shù)： <span></span>次</h2>
</div>
<div class="enter" style="width: 30%;background-color: #ccc;float: right;padding: 50px">
<h2 style="background-color: white">鼠標移動上去 mouseenter事件觸發(fā)次數(shù): <span></span>次</h2>
</div>
<div class="leave" style="width: 30%;background-color: #ccc;float: left;padding: 50px;margin-top: 50px">
<h2 style="background-color: white">鼠標指針離開 mouseleave事件觸發(fā)次數(shù): <span></span>次</h2>
</div>
<div class="move" style="width: 30%;background-color: #ccc;float: right;padding: 50px;margin-top: 50px">
<h2 style="background-color: white">鼠標指針移動 mousemove事件觸發(fā)次數(shù): <span></span>次</h2>
</div>
<div class="out" style="width: 30%;background-color: #ccc;float: left;padding: 50px;margin-top: 50px">
<h2 style="background-color: white">鼠標指針離開 mouseout事件觸發(fā)次數(shù): <span></span>次</h2>
</div>
<div class="down" style="width: 30%;background-color: #ccc;float: right;padding: 50px;margin-top: 50px">
<h2 style="background-color: white">鼠標在元素上按下 mousedown事件觸發(fā)次數(shù): <span></span>次</h2>
</div>
<div class="up" style="width: 30%;background-color: #ccc;float: left;padding: 50px;margin-top: 50px">
<h2 style="background-color: white">鼠標在元素上松開 mouseup事件觸發(fā)次數(shù): <span></span>次</h2>
</div>
<div class="resize" style="width: 30%;background-color: #ccc;float: right;padding: 50px;margin-top: 50px">
<h2 style="background-color: white">瀏覽器窗口大小被調(diào)整 resize事件觸發(fā)次數(shù): <span></span>次</h2>
</div>
<div class="weizi" style="width: 93%;background-color: #ccc;padding: 50px;margin-top: 50px;float: left">
<h2 style="background-color: white;padding: 30px">當前鼠標位置： <span></span></h2>
</div>
</body>
</html>mouseover() 當鼠標指針位于元素上方會發(fā)生mouseover事件
//不論鼠標指針穿過被選元素或其子元素，都會觸發(fā) mouseover事件。
mouseenter() 當鼠標指針穿過元素時會發(fā)生事件
//只有在鼠標指針穿過被選元素時，才會觸發(fā)mouseenter 事件。
mousemove() 當鼠標指針在指定的元素中移動時，發(fā)生事件
//不論鼠標指針在被選元素或其子元素上移動，都會觸發(fā)mousemove事件
mouseleave() 當鼠標指針離開元素時
//只有再鼠標離開被選元素時，才會觸發(fā)mouseleave的事件。
mouseout() 當鼠標指針從元素上移開時
//不論鼠標指針在被選元素或其子元素上離開，都會觸發(fā)mouseout事件。
mousedown() 當鼠標指針移動帶元素上方按下鼠標按鍵時
//不論鼠標指針在被選元素或其子元素上按下，都會觸發(fā)mousedown事件。
mouseup() 當在元素上松開鼠標按鍵時
//不論鼠標指針在被選元素或其子元素上松開，都會觸發(fā)mouseup事件。
resize() 當調(diào)整當前瀏覽器窗口大小時
//當調(diào)整當前瀏覽器窗口大小時,會觸發(fā)resize事件
pageX() 屬性是鼠標指針的位置，相當于文檔的左邊緣 event.pageX event:必須 參數(shù)來自事件綁定函數(shù)
pageY() 屬性是鼠標指針的位置，相當于文檔的上邊緣 event.pageY event:必須 參數(shù)來自事件綁定函數(shù)