bom中的event以及一些window的API

Posted 2022-09-15 yzxyzx

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

事件对象 封装了所有的事件的相关的信息 ，当事件发生时，自动创建

DOM中一个事件的发生 三个阶段
 1.捕获
 由外到内，记录各级父元素上绑定的相同的事件
 2.目标触发
 首先触发目标元素上的事件处理函数
 3.冒泡
 按照捕获顺序，反向执行，由内到外，一次触发各级父元素绑定的事件处理函数

Event

1.在html中绑定 <ANY onclick="alert(‘hello world‘);"

这种是直接在HTML中绑定事件
 2.为事件属性赋值一个函数：
 document.getElementsByTagName("div")[0].onclick = fun;
 function fun()
 alert("hello world!");

这种是写在JS里先获取到元素在为其绑定事件
3.addEventListener
 ANY.addEventListener("事件名",fun , capture)
 apture:是否在捕获阶段提前触发，默认是false 控制事件触发的顺序
 ANY.removeEventListener("事件名",fun , capture)
function shoot1 ()
console.log(‘发射的是普通子弹‘);

function shoot2 ()
console.log(‘发射的是跟踪导弹‘);

事件监听，也是写在JS中

事件有一个冒泡，前面提到过在事件开始之前会有一个捕获阶段，那么冒泡就是根据捕获的方向顺序触发事件。

通过设置事件监听中的capture属性，将其改成true可以让其先触发

获取事件对象以及取消冒泡的方法：

事件对象 当事件发生时，自动创建的，封装所有事件信息的一个对象
获取：
 DOM标准：事件对象默认作为事件处理函数的第一个参数传入
function 处理函数(e/event)
 这个e就是在事件发生时，自动获得的事件对象

IE8：
 在全局window，定义了一个event
function 处理函数()
 window.event

 兼容：function 处理函数(e)
 e = e || window.event;

取消冒泡：
DOM标准：e.stopPropagation();

IE8：e.cancelBubble = true;
 兼容： if(e.stopPropagation())
 e.stopPropagation()
 else
 e.cancelBubble = true;

最后写下获取事件坐标的方法

document.getElementById("box").onclick = function (e)
console.log(‘相对于屏幕的：‘,e.screenX,e.screenY );
console.log(‘相对于文档显示区：‘,e.clientX,e.clientY );
console.log(‘相对于div：‘,e.offsetX,e.offsetY );