bom中的event以及一些window的API

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 );
}

猜你喜欢

转载自www.cnblogs.com/yzxyzx/p/11436721.html