触发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. 临时起异,要进入C++领域耍一个程序

    没办法.两周之内可以搞定吧. 就一个SESSION 0的问题. 网上有类似源码,调一下应该就可以吧..保佑顺利. 基本语法都还记得,快N年啦... #include <iostream> ...

  2. 洛谷—— P1825 [USACO11OPEN]玉米田迷宫Corn Maze

    https://www.luogu.org/problem/show?pid=1825 题目描述 This past fall, Farmer John took the cows to visit ...

  3. 【CV论文阅读】Dynamic image networks for action recognition

    论文的重点在于后面approximation部分. 在<Rank Pooling>的论文中提到,可以通过训练RankSVM获得参数向量d,来作为视频帧序列的representation.而 ...

  4. PayPal加密证书.pem的生成

    How do I create a public certificate for use with PayPal Encrypted Website Payments?   Before you ca ...

  5. 【转】在Oracle中查看各个表、表空间占用空间的大小

    查看当前用户每个表占用空间的大小:    select segment_name,sum(bytes)/1024/1024 from user_extents group by segment_nam ...

  6. UNIX网络编程——网络I/O模型

    在学习UNIX网络编程的时候.一開始分不清 同步 和 异步,所以还是总结一下,理清下他们的差别比較好. IO分类 IO依据对IO的调度方式可分为堵塞IO.非堵塞IO.IO复用.信号驱动IO.异步IO. ...

  7. oninput 中文输入

    使用 input 监听 input 中文输入,会被每次输入的字母打断,下面就解决这个问题 $('input') .off() .on('input',function(){ if($(this).pr ...

  8. Linux下的应用程序开机自启动

    Linux下的应用程序开机自启动,目前我知道的有2种: 1.将启动语句写到/etc/rc.local 2.在init.d放置启动脚本 第一种,很简单,直接写进去就行,比如说: /db/mongodb/ ...

  9. MongoDB集群——副本集

    1. 副本集的结构及原理 副本集包括三种节点:主节点.从节点.仲裁节点.主节点负责处理客户端请求,读.写数据, 记录在其上所有操作的oplog: 从节点定期轮询主节点获取这些操作,然后对自己的数据副本 ...

  10. ConfigurationManager.AppSettings Property

    在app.config文件中添加如下配置 <appSettings> <add key="Server" value="127.0.0.1"/ ...