Jquery的事件方法
<!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++);
})//不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover事件。
$('div.enter').mouseenter(function(){
$('.enter span').text(a2++);
})//只有在鼠标指针穿过被选元素时，才会触发mouseenter 事件。
$('div.leave').mouseleave(function(){
$('.leave span').text(a3++);
})//只有再鼠标离开被选元素时，才会触发mouseleave的事件。
$('div.move').mousemove(function(){
$('.move span').text(a4++);
})//不论鼠标指针在被选元素或其子元素上移动，都会触发mousemove事件。
$('div.out').mouseout(function(){
$('.out span').text(a5++);
})//不论鼠标指针在被选元素或其子元素上离开，都会触发mouseout事件。
$('div.down').mousedown(function(){
$('.down span').text(a6++);
})//不论鼠标指针在被选元素或其子元素上按下，都会触发mousedown事件。
$('div.up').mouseup(function(){
$('.up span').text(a7++);
})//不论鼠标指针在被选元素或其子元素上松开，都会触发mouseup事件。
$(window).resize(function(){
$('.resize span').text(a8++);
})//当调整当前浏览器窗口大小时,会触发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事件触发次数： <span></span>次</h2>
</div>
<div class="enter" style="width: 30%;background-color: #ccc;float: right;padding: 50px">
<h2 style="background-color: white">鼠标移动上去 mouseenter事件触发次数: <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事件触发次数: <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事件触发次数: <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事件触发次数: <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事件触发次数: <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事件触发次数: <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">浏览器窗口大小被调整 resize事件触发次数: <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() 当鼠标指针位于元素上方会发生mouseover事件
//不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover事件。
mouseenter() 当鼠标指针穿过元素时会发生事件
//只有在鼠标指针穿过被选元素时，才会触发mouseenter 事件。
mousemove() 当鼠标指针在指定的元素中移动时，发生事件
//不论鼠标指针在被选元素或其子元素上移动，都会触发mousemove事件
mouseleave() 当鼠标指针离开元素时
//只有再鼠标离开被选元素时，才会触发mouseleave的事件。
mouseout() 当鼠标指针从元素上移开时
//不论鼠标指针在被选元素或其子元素上离开，都会触发mouseout事件。
mousedown() 当鼠标指针移动带元素上方按下鼠标按键时
//不论鼠标指针在被选元素或其子元素上按下，都会触发mousedown事件。
mouseup() 当在元素上松开鼠标按键时
//不论鼠标指针在被选元素或其子元素上松开，都会触发mouseup事件。
resize() 当调整当前浏览器窗口大小时
//当调整当前浏览器窗口大小时,会触发resize事件
pageX() 属性是鼠标指针的位置，相当于文档的左边缘 event.pageX event:必须 参数来自事件绑定函数
pageY() 属性是鼠标指针的位置，相当于文档的上边缘 event.pageY event:必须 参数来自事件绑定函数