Practical Training Jquery 事件（11.10）程式碼及註釋
阿新 • • 發佈：2021-11-10
<!DOCTYPE html>\
<!-- zh-cn 告訴瀏覽器這是中文的頁面，不用翻譯 -->
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
width: 100px;
height: 100px;
margin: 0 auto;
background-color: aquamarine;
padding: 50px;
}
.parent .child{
width: 100px;
height: 100px;
/* margin: 50px; */
background-color: pink;
}
</style>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
// 基本事件
// 滑鼠事件
// .click ==的單擊事件 這裡面沒有 on 直接+事件
// 和HTML的區別：因為是.連結的 所以可以寫多個
$(".child").click(function(){
console.log(0);
});
// .mousemove 滑鼠移動
$(".child").mousemove(function(e){
// 檢視e裡面的具體內容 有幾個xy==結果是4對
console.log(e);
// screen 螢幕/顯示器 顯示器左上角
// page 頁面 當前頁面的左上角
// clientx/clienty ==》左上角 可視區域 ===》對應 顯示頁面的區域的左上角 （檢視視窗的左上角）（位置是永遠不會改變 一直是左上角）
// offset 元素 ===》對應的是元素的左上角
// page和client 的關係
// 頁面沒有滾動時，page和client基準點重合、
// 預設情況下page和client是一樣的當出現滾動（向下滑動）時，page會大於client
});
// // $(".child").mouseover(function(){ // $(this).css("background-color","red"); // }).mouseout(function(){ // $(this).css("background-color","pink"); // }); // hover 有兩個引數 第一個是滑鼠移入、第二個是滑鼠移出 // $(".child").hover(function(){ // $(this).css("background-color","red"); // },function(){ // $(this).css("background-color","pink"); // });
// 事件冒泡 // 當事件冒泡遇見單擊事件時，可能會阻止事件冒泡 function stopPropagation(e){ // 阻止預設事件/阻止冒泡 e.stopPropagation(); // 阻止預設行為 reset/submit/a[href] e.preventDefault(); // 直接阻止上面的兩種 直接阻止 一般寫再最後 // 一般不常用 例如：當遇到ie老版本瀏覽器的時候，才會用它 return false; } // .child .parent $(".child").click(function(e){ console.log(".child"); return stopPropagation(e); }); $(".parent").click(function(){ console.log(".parent"); }); }); </script> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
// // $(".child").mouseover(function(){ // $(this).css("background-color","red"); // }).mouseout(function(){ // $(this).css("background-color","pink"); // }); // hover 有兩個引數 第一個是滑鼠移入、第二個是滑鼠移出 // $(".child").hover(function(){ // $(this).css("background-color","red"); // },function(){ // $(this).css("background-color","pink"); // });
// 事件冒泡 // 當事件冒泡遇見單擊事件時，可能會阻止事件冒泡 function stopPropagation(e){ // 阻止預設事件/阻止冒泡 e.stopPropagation(); // 阻止預設行為 reset/submit/a[href] e.preventDefault(); // 直接阻止上面的兩種 直接阻止 一般寫再最後 // 一般不常用 例如：當遇到ie老版本瀏覽器的時候，才會用它 return false; } // .child .parent $(".child").click(function(e){ console.log(".child"); return stopPropagation(e); }); $(".parent").click(function(){ console.log(".parent"); }); }); </script> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>