JS——event
触发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的更多相关文章
- js event 2
js event 2 浏览器兼容 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- Node.js Event Loop 的理解 Timers,process.nextTick()
写这篇文章的目的是将自己对该文章的理解做一个记录,官方文档链接The Node.js Event Loop, Timers, and process.nextTick() 文章内容可能有错误理解的地方 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 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 ...
- Node.js event loop 和 JS 浏览器环境下的事件循环的区别
Node.js event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...
- 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 ...
- js & Event Bus
js & Event Bus global event handler (broadcast / trigger / emit / listen ) // 实现一个 EventBus类,这个类 ...
- [译]Node.js - Event Loop
介绍 在读这篇博客之前,我强列建议先阅读我的前两篇文章: Getting Started With Node.js Node.js - Modules 在这篇文章中,我们将学习 Node.js 中的事 ...
- JS Event事件流(冒泡机制、捕获机制、事件绑定)
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
随机推荐
- 文件处理: read、readline、 readlines()
假设a.txt的内容如下所示: Hello Welcome What is the fuck.. 1. read([size])方法 read([size])方法:从文件当前位置起读取size个字节, ...
- windows server 2008R2 上安装配置freesshd
从FREESSHD官方网站下载最新的软件版本,下载地址是http://www.freesshd.com/?ctt=download 双击刚刚下载的freeSSHd.exe进行安装,安装时其他都是默认安 ...
- Fast Matrix Calculation 矩阵快速幂
One day, Alice and Bob felt bored again, Bob knows Alice is a girl who loves math and is just learni ...
- NOIP2013 提高组合集
NOIP 2013 提高组 合集 D1 T1 转圈游戏 快速幂裸题 #include <iostream> #include <cstdio> #include <cst ...
- 洛谷—— P1825 [USACO11OPEN]玉米田迷宫Corn Maze
https://www.luogu.org/problem/show?pid=1825 题目描述 This past fall, Farmer John took the cows to visit ...
- gradle: 修改gradle-xx-bin.zip下载地址
进入gradle/wrapper/目录,修改gradle-wrapper.properties文件, 将distributionUrl修改为自己的下载地址即可. 另外修改gradle reposito ...
- Erlang下与其他程序和语言的通信机制(2)
前面聊了普通端口,今天聊下链入式驱动端口,以及NIFs. 链入式驱动端口 如上图所示,链入式驱动端口与Erlang虚拟机存在于同一个OS进程中. 在Erlang这边与普通端口类似,所有与链入式驱动端口 ...
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)
一年前,从不知道Ajax是什么,伴随着不断的积累,到如今常常使用,逐渐有了深入的认识. 今天,假设想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在具体讨论Aj ...
- 关于HuffmanCoding的简单分析
1.what's problem we faced? /** * Q: what's problem we faced? * * A: Data compression is still ...
- 【Spark】DAGScheduler源代码浅析
DAGScheduler DAGScheduler的主要任务是基于Stage构建DAG,决定每个任务的最佳位置 记录哪个RDD或者Stage输出被物化 面向stage的调度层.为job生成以stage ...