事件
事件：对某个元素的某种操作
事件元素:触发事件的元素
事件类型:某种动作，单击，移入，移除
事件对象：当某个事件触发时产生的对象就是事件对象
1.事件对象:(非必须)在事件操作中，事件分为两类
a.鼠标操作 b.键盘操作
2.事件对象携带着相关事件类型的所有属性和方法
3.事件对象必须得有事件才会产生
<script>
var oTiger = document.querySelector("#tiger");
document.onclick = function(){
// 回忆offset读写的语法
// 写:必须是带px的字符串
oTiger.style.top = oTiger.offsetTop - 100 + "px";
setTimeout(function(){
oTiger.style.top = "500px";
},2000);
}
</script>
事件对象的兼容：
每个事件函数天生有一个参数叫event，它是事件对象，如果向修改event的名称，事件函数的第一个参数就是用来修改的
var e = evt || event;
event使用前提，必须有事件 不同的对象产生的事件不同
案例：小老虎跳一跳
坐标：
page:针对于整个页面的左顶点 常用
console.log("page",e.pageX,e.pageY);
client:针对于可视窗口的左顶点 不常用
console.log("client",e.clientX,e.clientY);
offset:针对于父元素的左顶点 常用于拖拽
console.log("offset",e.offsetX,e.offsetY);
案例：跟随鼠标移动
<script>
//事件元素:大白板
//事件类型:onmousemove
//事件对象:获取鼠标的坐标,将坐标赋值给box的left和top
// (一个元素要在页面发生位移，本质就是在修改left和top)
var oTiger = document.querySelector("#tiger");
//给整个页面绑定：鼠标移动事件
document.onmousemove = function(evt){
//兼容的方式获取event对象
var e = evt || event;
// 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。
//注意，如果想通过 style.left 来设置属性，一定要给 box1开启绝对定位。
oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px";
oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px";
}
</script>
DOM事件流
事件传播的三个阶段是：事件捕获、事件冒泡和目标。
-
事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。
-
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
-
事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。
事件捕获
addEventListener可以捕获事件：
box1.addEventListener("click", function () {
alert("捕获 box3");
}, true); //参数为true，代表事件在捕获阶段执行。
重点：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。
事件冒泡
冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制
注意事项:
并不是所有事件都会产生冒泡问题 onfocus onblur onl oad不会产生冒泡问题。意思是，事件不会往父元素那里传递。
检查一个元素是否会冒泡，可以通过事件的以下参数：
event.bubbles
//如果返回值为true，说明该事件会冒泡；反之则相反。
阻止事件冒泡
w3c的方法： event.stopPropagation();
IE10以下则是：event.cancelBubble = true
兼容写法
event = event || window.event;
e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
如何阻止浏览器的默认行为
事件对象.函数名或事件对象.属性名
evt.preventDefault();
兼容写法
evt.preventDefault?evt.preventDefault():e.returnValue=false;