触发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. 解决使用myeclipse电脑卡的问题

    1. 原因:myeclipse会自动更新,因此会占用大量内存 2. 解决方法: (1)window->Perferences->General->Startup and Shutdo ...

  2. Docker website

    https://github.com/docker/labs/  (nguo123gmail  Cooooos123!) Docker Tutorials and Labs At this time ...

  3. - > 并查集+路径压缩(详解)(第一节)

    先举一个友爱的例子解释一下并查集: 话说江湖上散落着各式各样的大侠,有上千个之多. 他们没有什么正当职业,整天背着剑在外面走来走去,碰到和自己不是一路人的,就免不了要打一架.但大侠们有一个优点就是讲义 ...

  4. Ubuntu下非常规方法安装绿色软件(压缩包)

    继上一篇http://www.cnblogs.com/EasonJim/p/7117567.html文章中说的常规方式安装的软件,都会自动在命令行及Dash Home中体现. 但是如果是使用压缩包进行 ...

  5. Workspace in use or cannot be created, choose a different one.--错误解决的方法

    eclipse 使用一段时间后.有时会由于一些故障自己就莫名奇异的关闭了,再打开时有时没有问题,有时有会提示错误 Workspace Unavailable: Workspace in use or ...

  6. 开发汉澳sinox64位,对接汉澳矩阵电脑

    汉澳矩阵电脑刚刚不久前提出,即使全然设计出了汉澳矩阵电脑线路图,要在上面执行操作系统必须有矩阵操作系统. 汉澳sinox64位操作系统并非矩阵操作系统,仅仅是更为接近. 汉澳矩阵电脑假设插有16个矩阵 ...

  7. 你有必要知道的 25 个 JavaScript 面试题

    1.使用 typeof bar === "object" 推断 bar 是不是一个对象有神马潜在的弊端?怎样避免这样的弊端? 使用 typeof 的弊端是显而易见的(这样的弊端同使 ...

  8. POJ_1679_The Unique MST(次小生成树模板)

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23942   Accepted: 8492 D ...

  9. leetCode(49):Count Primes

    Description: Count the number of prime numbers less than a non-negative number, n. 推断一个数是否是质数主要有下面几种 ...

  10. HDU 5090 Game with Pearls(二分匹配)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5090 Problem Description Tom and Jerry are playing a ...