dom事件对象以及兼容写法

DOM中的事件对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论指定事件处理程序时使用什么方法(DOM0或DOM2)都会传入event对象
btn.onclick = function (event) { // event}
event上的属性
type: 被触发的事件的类型
target: 事件目标:触发该事件的具体元素
currentTarget:其事件处理程序当前正在处理事件的那个元素 (this始终是这个)
stopPropagation(): 取消事件进一步捕获或者冒泡 (如果bubble是为true,则可以使用这个方法)**
preventDefault(); 取消事件的默认行为 (如果cancelable是true,则可以使用这个方法)**
screenX: 距离屏幕左侧
screenY: 距离屏幕顶部
clientX:浏览器可视区域X轴坐标
clientY: 浏览器可视区域Y轴坐标
offsetX: 触发元素上X轴的坐标
offsetY: 触发元素上Y轴的坐标
pageY: 距离页面顶部的距离
pageX: 距离页面左侧的距离
兼容写法:
// 兼容写法 获取事件对象
var event = e || window.event;
// 获取事件目标
var target = event.target || event.srcElement;
// 兼容阻止默认事件
event.preventDefault() ? preventDefault() : (event.returnValue = false);
// 兼容阻止冒泡
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,873评论 1 11
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    LemonnYan阅读 3,926评论 0 4
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 7,444评论 0 4
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 5,763评论 0 1
  • 13.1 事件流 “DOM2级事件”规定事件流包括3个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。事件捕获表示...
    Elevens_regret阅读 3,335评论 0 0