abstrakt：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="前端課件/jQuery/jquery-3.3.1.min.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="前端課件/jQuery/jquery-3.3.1.min.js"></script>
<style type="text/css">
.div_1{width: 100px;height: 100px;background: red;margin-top: 30px;}
</style>
</head>
<body>
<script>
// ready() 當我們的DOM已經(jīng)加載，頁面已經(jīng)加載完，觸發(fā)的事件==js的onload
// 不能與<body onload="">一起使用
// blur() 當元素失去焦點==onblur
// focus() 當元素獲取焦點==onfocus
// change() 當元素的值發(fā)生改變的時候
// click() 點擊事件==js的onclick
// dblclick() 點擊事件==js的ondblclick
// mouseover() 當鼠標指針位于元素上方時會發(fā)生mouseover事件
// mouseenter() 當鼠標指針穿過元素時會發(fā)生mouseenter事件
// mousemove() 當鼠標指針在指定的元素中移動時，就會發(fā)生該事件
// mouseleave() 當鼠標指針離開元素時
// mouseout() 當鼠標指針從元素上移開時
// mousedown() 當鼠標指針移動到元素上方并按下鼠標按鍵時
// mouseup() 當在元素上松開鼠標按鍵時
// resize() 當調整瀏覽器窗口大小時
// pageX() 屬性是鼠標指針的位置，相對于文檔的左邊緣 event.pageX event:必選 參數(shù)來自事件綁定函數(shù)。
// pageY() 屬性是鼠標指針的位置，相對于文檔的上邊緣 event.pageY event:必選 參數(shù)來自事件綁定函數(shù)。
$(document).ready(function(){
// $('input').blur(function(){
// $('input').css('background','red')
// })
// $('input').focus(function(){
// $('input').css('background','blue')
// })
// $('input').change(function(){
// $('input').css('background','pink')
// $('button').click(function(){
// $('div').css('background','blue')
// $('div').dblclick(function(){
// $(this).css('background','pink')
// })
// $('.div_1').mouseover(function(){
// $('.div_1').css('background','pink')
// })
// $('.div_1').mouseleave(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mouseenter(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mousemove(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mousedown(function(){
// $('.div_1').css('background','blue')
// })
// $('.div_1').mouseup(function(){
// $('.div_1').css('background','pink')
// })
// var i=0
// $(window).resize(function(){
// $('b').text(i++)
// })
$(document).mousemove(function(aa){
$('span').text('x: '+aa.pageX+'y: '+aa.pageY)
})
})
</script>
<!--<input type="text" name="">
<div style="width: 100px;height: 100px;background: red;margin-top: 30px;"></div>
<button>點擊</button>-->
<div class="div_1" ></div>
<div>
當前鼠標的位置：<span> </span>
</div>
<div>
頁面被調整大小的次數(shù)：<b> </b>
</div>
</body>
</html>本章節(jié)主要介紹了幾個常用事件函數(shù)，最多的就是鼠標事件，經(jīng)過多次測試后發(fā)現(xiàn)mouseover()和mouseenter()
的效果有點相似，mouseleave()和mouseout()的效果有點相似，問了下度娘說是‘mouseenter事件只作用于目標元素，而mouseover作用于目標元素及其后代元素’mouseleave()事件只作用于目標元素，而mouseout()作用于目標元素及其后代元素