????:<!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() 當(dāng)我們的DOM已經(jīng)加載,頁(yè)面已經(jīng)加載完,觸發(fā)的事件==js的onload // 不能與<body onload="">一起使用 // blur() 當(dāng)元素失去焦點(diǎn)==onblur // focus() 當(dāng)元素獲取焦點(diǎn)==onfocus // change() 當(dāng)元素的值發(fā)生改變的時(shí)候 // click() 點(diǎn)擊事件==js的onclick // dblclick() 點(diǎn)擊事件==js的ondblclick // mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時(shí)會(huì)發(fā)生mouseover事件 // mouseenter() 當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)會(huì)發(fā)生mouseenter事件 // mousemove() 當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí),就會(huì)發(fā)生該事件 // mouseleave() 當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí) // mouseout() 當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí) // mousedown() 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí) // mouseup() 當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí) // resize() 當(dāng)調(diào)整瀏覽器窗口大小時(shí) // pageX() 屬性是鼠標(biāo)指針的位置,相對(duì)于文檔的左邊緣 event.pageX event:必選 參數(shù)來(lái)自事件綁定函數(shù)。 // pageY() 屬性是鼠標(biāo)指針的位置,相對(duì)于文檔的上邊緣 event.pageY event:必選 參數(shù)來(lái)自事件綁定函數(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>點(diǎn)擊</button>--> <div class="div_1" ></div> <div> 當(dāng)前鼠標(biāo)的位置:<span> </span> </div> <div> 頁(yè)面被調(diào)整大小的次數(shù):<b> </b> </div> </body> </html>
本章節(jié)主要介紹了幾個(gè)常用事件函數(shù),最多的就是鼠標(biāo)事件,經(jīng)過(guò)多次測(cè)試后發(fā)現(xiàn)mouseover()和mouseenter()
的效果有點(diǎn)相似,mouseleave()和mouseout()的效果有點(diǎn)相似,問(wèn)了下度娘說(shuō)是‘mouseenter事件只作用于目標(biāo)元素,而mouseover作用于目標(biāo)元素及其后代元素’mouseleave()事件只作用于目標(biāo)元素,而mouseout()作用于目標(biāo)元素及其后代元素