触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息:

普通浏览器支持 event(传参),IE678支持 window.event(无参),兼容写法:

<script>
var divEle = document.getElementsByTagName("div")[0];
divEle.onclick = function (e) {
e = e || window.event;
console.log(e);
}
</script>

client、page、screen三者之间的区别:

clientX/clientY:当前窗口(可视区域)的左上角为基准点

pageX/pageY:在不拖动情况下同上,在拖动的情况下,会越来越大

screenX/screenY:当前屏幕左上角为基准点

pageX、pageY在IE678中不支持,兼容写法:被卷去的部分+可视区域坐标

<script>
document.onclick = function (e) {
e = e || window.event;
var pageY = e.pageY || scroll().top + e.clientY;
console.log(pageY);
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>

特别补充:offsetX/offsetY,以触发事件的元素左上角为基准点

<script>
var divEle = document.getElementsByTagName("div")[0];
divEle.onclick = function (e) {
e = e || window.event;
console.log(e.offsetY);
}
</script>

 

JS——event的更多相关文章

  1. js event 2

    js event 2  浏览器兼容 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  2. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  3. Node.js Event Loop 的理解 Timers,process.nextTick()

    写这篇文章的目的是将自己对该文章的理解做一个记录,官方文档链接The Node.js Event Loop, Timers, and process.nextTick() 文章内容可能有错误理解的地方 ...

  4. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  5. The Node.js Event Loop, Timers, and process.nextTick() Node.js事件循环,定时器和process.nextTick()

    个人翻译 原文:https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ The Node.js Event Loop, Ti ...

  6. Node.js event loop 和 JS 浏览器环境下的事件循环的区别

    Node.js  event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...

  7. The Node.js Event Loop, Timers, and process.nextTick()

    The Node.js Event Loop, Timers, and process.nextTick() | Node.js https://nodejs.org/uk/docs/guides/e ...

  8. js & Event Bus

    js & Event Bus global event handler (broadcast / trigger / emit / listen ) // 实现一个 EventBus类,这个类 ...

  9. [译]Node.js - Event Loop

    介绍 在读这篇博客之前,我强列建议先阅读我的前两篇文章: Getting Started With Node.js Node.js - Modules 在这篇文章中,我们将学习 Node.js 中的事 ...

  10. JS Event事件流(冒泡机制、捕获机制、事件绑定)

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

随机推荐

  1. 玲珑杯 ACM Round #10

    A 题意:给长度为n的序列染黑白色,要求连续的黑的格子数量<=a,连续的白的格子数量<=b,问方案总数,有多个询问 分析:递推 注意数据范围,是可以O(n)做的,所以可以直接递推 B 题意 ...

  2. MYSQL中的主要查询方法

    #简单查询 #查询表中的所有数据SELECT * FROM test; #查询表中的指定列的数据SELECT cid,cname FROM test; #过滤重复的数据SELECT DISTINCT ...

  3. ASPNET Razor 使用 @Ajax.BeginForm 需要注意到的细节

    创建空的web项目,通过Nuget引用mvc组件来搭建空的MVC项目时, 在视图页面中无法使用@Ajax.BegForm来进行异步提交数据, 而新建默认的MVC模板项目却能够正常使用@Ajax.Beg ...

  4. 二维数组的查找,刷题成功——剑指Offer

    今天又做了一道题目,通过啦,欧耶! https://www.nowcoder.net/practice/abc3fe2ce8e146608e868a70efebf62e?tpId=13&tqI ...

  5. C++中const引用的是对象的时候只能调用该对象的f()const方法

    const引用的作用: 1. 避免不必要的复制.  2. 限制不能修改对象. const 引用的是对象时只能访问该对象的const 函数  例: class A { public: void cons ...

  6. 46.Android 自己定义Dialog

    46.Android 自己定义Dialog Android 自己定义Dialog 前言 提示Dialog 提示Dialog 效果图 菜单Dialog 菜单Dialog 效果图 DialogActivi ...

  7. chosen.jquery.js 使用笔记

    using chosen.jquery.js using chosen.jquery.css html: <label for="MeetingUsersList" clas ...

  8. NATS连线协议具体解释

    NATS连线协议具体解释 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs NATS的连线协议是一个简单的.基于文本的公布 ...

  9. Redis缓存数据库安全加固指导(一)

    背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一 ...

  10. CSDN 厦门大学线下编程比赛第一题:求和(同余定理)

    题目意思: 给定a和n,计算a+aa+aaa+aaaa+...+a...a(n个a) 的和. 输入描写叙述:測试数据有多组,以文件结尾.每行输入a,n(1<=a,n<=1000000). ...