JS中的event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

它是事件绑定中的一个隐藏参数，即实参，可以使用arguments[0]来获取。但是这样比较麻烦，所以我们采取传递一个形参来获取它。

例如：var e = event || window.event;考虑到兼容性。

三个属性：

event.offsetX:鼠标相对于点击元素左边的水平距离位置

event.clientX:鼠标相对于可视区域左侧的水平位置（使用最多）

event.screenX:鼠标相对于屏幕左侧的水平位置

有时因为我们的页面过长或者过宽，到时窗口出现滚动条，这时当滚动条滚动时，获取到的鼠标位置就不是在页面上的绝对位置，而只是在可视区域的位置，我们可以这样：

event.clientX+ (document.documentElement.scrollLeft|| document.body.scrollLeft);

event.clientY+(document.documentElement.scrollTop|| document.body.scrollTop);

其中document.documentElement和document.body都是获取<body>标签。

禁止右键操作：

document.oncontextmenu = function(e){
e.preventDefault();

实现鼠标点击显示当前的坐标的小例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Event</title></head><script type="text/javascript">function showcoords(e) {var e = event || window.event;var x = e.clientX;//  var x = e.screenX;var y = e.clientY;//    var y = e.screenY;document.getElementById("d").innerHTML = "X:" + x + " " + "Y:" + y;}</script><body οnmοusedοwn="showcoords(event)"><div id="d" style="width: 600px; height: 600px;background: #0f0;margin: 0 auto;"></div></body></html>

键盘事件实例：

<script type="text/javascript">document.onkeydown = function() {var e = event || window.event || arguments.callee.caller.arguments[0];if (e.keyCode == 113) { // 按 F2 alert(1);}};</script>

JS中的event对象相关推荐

JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
JS 中的 event?event:window.event什么意思？求详解。
JS 中的 event?event:window.event什么意思?求详解. 2013-04-16 00:01flying607 | 分类:JavaScript |浏览813次 <script ...
js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
js中两个对象的比较
代码取自于underscore.js 1.8.3的isEqual函数. 做了一些小小的修改,主要是Function的比较修改. 自己也加了一些代码解读. <!DOCTYPE html> & ...
JavaScript -- 时光流逝（三）：js中的 String 对象的方法
JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...
js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js ...
js mysql json字符串转数组中_php数据库数据转换为js中的json对象
/ 1.在company数据user表中取出10条数据,保存为数组 2.在将数组转化为json格式,传递给js 3.用json解析器将传递过来的json字符串转化为json对象, 4.用documen ...
js中几个对象的区别和用法
js中几个对象的区别和用法今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href" ...

JS中的event对象

JS中的event对象相关推荐

最新文章

热门文章