触发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. A+B Problem IV

    描述acmj最近发现在使用计算器计算高精度的大数加法时很不方便,于是他想着能不能写个程序把这个问题给解决了.   输入 包含多组测试数据每组数据包含两个正数A,B(可能为小数且位数不大于400) 输出 ...

  2. P2626 斐波那契数列(升级版) 洛谷(2626)

    https://www.luogu.org/problem/show?pid=2626 题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f ...

  3. 19、Java并发性和多线程-嵌套管程锁死

    以下内容转自http://ifeve.com/nested-monitor-lockout/: 嵌套管程锁死类似于死锁, 下面是一个嵌套管程锁死的场景: 线程1获得A对象的锁. 线程1获得对象B的锁( ...

  4. subclipse 和 eclipse结合遇到的问题

    subclipse是eclipse的一个SVN插件.但是我在使用的时候不断的报出下面的错误: the applet is attempting to access the "exists&q ...

  5. token的生成规则

    1.token生成规则要添加时间戳,timestamp,以便解析token时,可以根据判断时间超过30分钟不予处理.像session过期时间一样.

  6. LeetCode240:Search a 2D Matrix II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  7. Codeforces 196 D. The Next Good String

    D. The Next Good String time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  8. 【Android】资源系列(一) -- 国际化(多语言)

    1.Android 中要实现国际化比較简单.     字符串国际化:仅仅要在 res 目录下新建相应语言的 values 目录就好了.     如.英语环境下的.目录命名为:values-en     ...

  9. JMeter—丰富报表功能PerfMon插件

    可能有童鞋不知道PerfMon插件是干啥的.这里简要说一下: 在做负载測试时,我们要时刻关注server的CPU.MEM--的使用情况,可是JMeter本身对这些信息是不做收集的,这个时候PerfMo ...

  10. 细数MQ那些不得不说的8大好处

    消息队列(MQ)是目前系统架构中主流方式,在大型系统及大数据中广泛采用.对任何架构或应用来说, MQ都是一个至关重要的组件.今天我们就来细数MQ那些不得不说的好处. 好处一:解耦 在项目启动之初来预测 ...