JavaScript关于事件对象的一些问题

约定不等于承诺〃 2022-06-01 08:08 199阅读 0赞

# **事件对象概述** #

**当我们触发dom'的某个事件时，会产生一个事件对象even**t，event里包含了所有关于此事件的信息。所有的浏览器都支持event对象，但是支持的方式有一定差异。

**chrome，Firefox，safari等浏览器支持event（带参数，任意参数）**

**ie678支持event window.event（无参数，内置）**

# 事件对象的获取 #

**火狐，谷歌，event获取是通过，在事件绑定的函数中加入参数，这个参数就是event**

*例如*

*box.onclick = function (aaa)\{  aaa就是event\}*

**ie678中是通过 window.event直接获取**

# 事件对象兼容性写法 #

既然ie678和主流浏览器有差异，随之带来的问题就是兼容性问题。

处理兼容问题的方法如下

*给事件绑定函数中添加参数一般默认都写event（你也可以写其他，最好不要那么做）*

*事件绑定函数里面使用*

**var event  = event || window.event;**

**box.onclick = function (event)\{  var event  = event || window.event;\}**

# 事件对象的一些比较常用的东西。 #

**重点**

**pageX   光标相对于该网页的水平位置**

**pageY   光标相对于该网页的垂直位置**

**screenX  光标相对于屏幕的水平位置**

**screenY  光标相对于屏幕的垂直位置**

**clientX  光标相对于该网页水平位置（当前可见区域）**

**clientY   光标相对于该网页垂直位置（当前可见区域）**

pageY/pageX对不同浏览器有一定的兼容问题。

所以当我们获取的时候需要处理兼容，处理兼容时需要使用到scroll家族的内容，所以封装了一个方法

scroll（）方法如下

function scroll() \{  
                return \{  
                    "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,  
                    "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft  
                \}  
            \}

**pageY/pageX=event.clientY/clientX+scroll().top/scroll().left**

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端高级JavaScript - 关于面向对象的一些面试题

1.下面代码运行的结果 //1. 答案： 0 30 function fun(){ this.a=0; this.b=

傷城~/ 2022年12月20日 12:46/ 0 赞/ 140 阅读

相关【笔记】JavaScript - 关于面向对象的一些基本概念知识

关于构造函数和普通函数底层运行原理的对比普通函数 > 普通执行时形成一个独立的私有上下文；在私有上下文中有用于保存私有变量的活动对象AO > 初始化

末蓝、/ 2022年12月19日 11:40/ 0 赞/ 229 阅读

相关 [JavaScript]关于事件绑定和大循环的一些测试结论

一、大循环里有抛出错误 let a = 0 let b = 0 while(a<50000){

冷不防/ 2022年12月10日 14:39/ 0 赞/ 95 阅读

相关关于List的一些问题

1 扩容类问题 1. ArrayList无参构造器构造，现在add一个值进去，此时数组的大小是多少，下一次扩容前最大可用大小是多少？答：此时数组的大小是1，下一次最

r囧r小猫/ 2022年11月25日 00:36/ 0 赞/ 263 阅读

相关 Javascript中的事件对象

1、事件对象在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为event的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、可能与特定事

ゝ一纸荒年。/ 2022年11月11日 13:20/ 0 赞/ 176 阅读

相关关于JavaScript的一些方法

今天用了大半天的时间，刷完了fcc中文社区上的js基础算法题，重新再刷这些题目的时候发现，有些函数方法还是掌握不够。就今天的学习记录一下。 1. map()方法

蔚落/ 2022年06月10日 00:54/ 0 赞/ 219 阅读

相关 JavaScript关于事件对象的一些问题

事件对象概述当我们触发dom'的某个事件时，会产生一个事件对象event，event里包含了所有关于此事件的信息。所有的浏览器都支持event对象，但是支持的方式

约定不等于承诺〃/ 2022年06月01日 08:08/ 0 赞/ 200 阅读

相关 java中关于匿名对象的一些小问题

匿名对象：所谓匿名对象，就是没有名字的对象，就是在创建对象时不起名字。如创建一个Student对象： new Student(); 这样，一个匿名对象已经创建完了

深藏阁楼爱情的钟/ 2022年05月26日 12:36/ 0 赞/ 255 阅读

相关 JavaScript事件对象与事件委托

事件对象 event || window.event 用于IE 事件源对象: event.target 火狐独有的 event.srcElement Ie独有的

╰半橙微兮°/ 2022年05月19日 01:36/ 0 赞/ 297 阅读

相关关于面向对象的一些思考

我们都知道，PHP的特色就是简单、快速、适用，在PHP的世界里，一切都是以解决问题为主，所以呢，很多设计方面的东西，往往被忽视或者说是排斥，虽然说PHP的面向对象这个思想被提出

痛定思痛。/ 2022年04月12日 12:15/ 0 赞/ 327 阅读