Practical Training Jquery 事件（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>
