总结--------事件2

Posted 2020-10-09

一 事件对象(event):与特定事件相关且包含有关该事件详细信息的对象
通过事件可以触发event对象的元素,鼠标的位置及状态,按下的键等等
event对象只在事件发生的过程中才有效
非IE浏览器里的event跟IE里的不同,IE里面的是全局变量,随时都可用
非IE浏览器需要用参数诱导才能使用是运行时的一个局部变量

clientX:鼠标在浏览器窗口中的横向坐标
clientY:鼠标在浏览器窗口中的纵向坐标

二 事件流:描述的是页面中接受事件的顺序
在w3c的标准里面规定了事件的执行顺序要经历两个过程:事件捕获,事件冒泡
事件捕获:由最不具体的节点接收事件,而最具体的节点最后接收---由外到内的过程
最不具体的节点:document或者window
最具体的节点:绑定事件的对象最里层的节点
事件冒泡:由具体的元素接收,然后逐级向外面传播至最不具体的节点---由内到外的过程
整个事件流的顺序:先接收再传播

阻止事件冒泡:因为执行函数是在冒泡阶段执执行的
stopPropagation();
cancelBubble=true;
window.event?window.event.cancelBubble=true:e.stopPropagation();

阻止事件的默认行为:
preventDefault();
returnValue=false;
window.event?window.event.returnValue=false:e.preventDefault();

三 事件处理程序---事件后面绑定的函数
1 html事件处理:
直接添加到HTML结构当中
<tag onclick="funName()"></tag>---HTML的事件属性
2 DOM0级事件处理:
把一个函数赋值给一个事件
DOM.on事件名=function(){---对象的事件属性
程序块;
}
3 DOM2级事件处理:
添加事件句柄:
非IE低版本:
addEventListener("EventType",FunName,Bool);---事件句柄
true:在事件捕获阶段执行事件处理程序
false:在事件冒泡阶段执行事件处理程序

IE低版本:
attachEvent("on事件名",函数名);---只支持事件冒泡的阶段

移除事件句柄:
removeEventListener("EventType",FunName,Bool);
detachEvent("on事件名",函数名);
只能移除没有带参数的事件函数