2023-5-19（第十三天）

event事件对象

事件周期

从事件发生，到所有事件处理函数执行完毕的全过程

分为三个阶段：

0. 捕获阶段：由外向内，记录要发生的事件
1. 目标优先触发：目标元素---->当前点击的实际发生事件的元素
2. 冒泡触发：由内向外，依次执行记录的要发生的事件

获取事件对象event

• 主流浏览器：会自动作为事件处理函数的第一个传入参数
• 老IE：老IE的全局有event这个变量
• 兼容：event

获取鼠标的坐标位置

• 获取鼠标相对于屏幕的坐标

  e.screenX/Y;
  

• 获取鼠标相对于浏览器窗口/客户端/文档显示区域的坐标

  e.clientX/Y;
  

• 获取鼠标相对于网页的坐标

  e.pageX/Y;
  

阻止事件冒泡

//主流浏览器
e.stopPropagation();
​
//老IE
event.cancelBubble=true;
​
//兼容
event.cancelBubble=true;

事件委托/利用事件冒泡

作用： 如果多个子元素定义了相同或相似的事件操作，那么最好只给父元素定义一次

目标元素target

实际触发事件的元素

//主流浏览器
e.target
​
//老IE
event.srcElement
​
//兼容
event.srcElement

阻止浏览器的默认行为

浏览器的默认行为： a标签跳转、提交按钮提交表单、右键自带一个弹出框......

//主流浏览器
e.preventDefault();
​
//老IE
event.returnValue=false;
​
//兼容
event.returnValue=false;

获取键盘的键码

e.keyCode;

拓展

右键事件

window.oncontextmenu=function(){操作}

键盘事件

//按下和按住都会触发，任何键盘按键都可以触发
window.onkeydown

//按下和按住都会触发，只有数字、字母、回车、空格可以触发
window.onkeypress

//松开键盘才会触发，任何键盘按键都可以触发
window.onkeyup