<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Event对象属性与方法</title>
<!--
event;代表事件本身
event.type;代表事件类型；如：click
event.target;表示触发事件的源头，通俗理解：点击谁触发了事件，target就是谁
event.currentTarget;表示包含事件的元素；通俗理解：事件绑定在谁身上，currentTarget就是谁
event.preventDefault();阻止默认行为；如阻止a标签的链接跳转
event.stopPropagation();阻止事件冒泡和事件捕获；(翻译propagation：传播/繁殖/蔓延)
clientX/clientY;触发事件时鼠标位于浏览器窗口的固定X/Y轴坐标，不受滚动条影响；
pageX/pageY;触发事件时鼠标位于浏览器窗口的X/Y轴坐标，受滚动条影响；
screenX/screenY;触发事件时鼠标位于屏幕的X/Y轴坐标；
-->
<style>
#div{
width: 100px;
height: 60px;
border: 1px solid black;
}
#sec{
width: 400px;
height: 1000px;
background: yellow;
}
</style>
</head>
<body>
<div id="div">
爸爸<br />
<button id="btn">儿子</button>
</div>
<a id="a" href="https://www.baidu.com/">百度</a><!-- 默认行为：跳转至百度 -->
<ul id="ul">
ul
<li id="li">li1</li>
<li>li2</li>
</ul>
<section id="sec">sec</section>
<script>
var div=document.getElementById("div");
var btn=document.getElementById("btn");
//event.target/event.currentTarget
//事件句柄的函数参数默认就是event;可以随便命名（如：function(a))，后续调用可以用参数，也可以直接用event
div.addEventListener("click",function(){
console.log("叫爸爸")
console.log(event.target);//触发事件的源头；即整个button
console.log(event.currentTarget);//执行包含事件本身的元素；即整个div
})
//event/event.type
btn.addEventListener("click",function (){
console.log(event);//事件本身
console.log(event.type);//事件类型
})
//event.preventDefault()
var a=document.getElementById("a");
a.addEventListener("click",function (){
event.preventDefault();//阻止了a标签的链接跳转
})
//event.stopPropagation()
var ul=document.getElementById("ul");
var li=document.getElementById("li");
ul.addEventListener("click",function (){
alert("ul");
});
li.addEventListener("click",function (){
alert("li");
event.stopPropagation();//添加该属性后，触发li事件后停止冒泡，不会再执行ul的事件
})
//clientX/clientY; pageX/pageY; screenX/screenY;
var sec=document.getElementById("sec");
sec.addEventListener("click",function(){
console.log(event.clientY);//触发事件时鼠标的屏幕坐标，不受滚动条影响
console.log(event.pageY);//触发事件时鼠标的浏览器窗口坐标，受滚动条影响
console.log(event.screenY);//触发事件时鼠标的屏幕坐标
})
</script>
</body>
</html>