事件对象

谁践踏了优雅 2023-08-17 15:38 113阅读 0赞

# 1    什么是事件对象 #

用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event

特征：

1.只有当事件发生的时候才会产生，只能在处理函数内部访问

2.处理函数运行结束后自动销毁

--------------------

# 2    事件对象的获取 #

事件对象需要作为参数传入事件

function fn(event)\{

console.log(event)

\}

或者

function()\{

console.log(arguments\[0\])

\}

IE中： window.event

正常浏览器中：    对象.on事件 = function(event)\{\}

兼容方式：

function fn(eve)\{

var e = eve || window.event;

\}

document.onclick = function(eve)\{

var e = eve ||window.event;

console.log(e);

\}

--------------------

# 3    事件对象的属性 #

event.button

返回值为0，左键；返回值为1，中键；返回值为2，右键

检测相对于浏览器的位置：clientX和clientY

当鼠标事件发生时，鼠标相对于浏览器左上角的位置

检测相对于文档的位置：pageX和pageY

当鼠标事件发生时，鼠标相对于文档左上角的位置。（IE7/8无）（类似于event.clientX和event.clientY）

检测相对于屏幕的位置：screenX和screenY

当鼠标事件发生时，鼠标相对于屏幕左上角的位置

检测相对于事件源的位置：offsetX和offsetY

当鼠标事件发生时，鼠标相对于事件发生元素左上角的位置

![18905690-b8eefa8695562290.png][]

代码如下:

![18905690-0f971138219eed86.png][]

--------------------

# 4    事件的冒泡 #

事件流：即事件的执行顺序

事件流中事件冒泡的由来：IE公司认为，如果你面前有个靶子，你的飞镖射中了其中一环，并不仅仅是只对这一环产生了操作，而是对整个靶子都产生了操作。

所以，当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发），但是事件冒泡对我们几乎没有任何好处，所以我们需要阻止事件冒泡。

怎么可能被你轻易阻止，缺德定律再次登场！

eve.stopPropagation();

eve.cancelBubble = true;        //兼容IE

总结：到目前为止，遇到的所有的js的兼容问题以及解决方式，当触发某个元素的某个事件时，它会先触发自己的对应事件，然后，依次向    上触发所有父级的相同事件,如果中间有父级没有相同事件，继续向上触发

--------------------

# 5    非行内样式的获取 #

获取非行内样式（兼容问题）

function getStyle(obj,attr)\{             //获取非行间样式，obj是对象，attr是值

if(obj.currentStyle)\{                //针对ie获取非行间样式

return obj.currentStyle\[attr\];

\}else\{

return getComputedStyle(obj,false)\[attr\];   //针对非ie

\};

\};

--------------------

# 6    offsetWidth／offsetHeight／offsetLeft／offsetTop #

offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body

offsetLeft：获取元素相对具有定位属性的父级元素的左侧偏移距离

offsetTop：获取元素相对就有定位属性的父级元素的顶部偏移距离

scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离

clientWidth/clientHeight：元素视窗宽度/高度

offsetWidth/offsetHeight：元素实际宽度/高度

![18905690-17ba79c2455f6498.png][]

通过代码实际测试个人的一点看法如下，只是单纯的个人看法！

![18905690-e32af2671363678b.png][]

##         感谢大家的阅读！！！    ##

[18905690-b8eefa8695562290.png]: /images/20230810/3a5f4c27e6a544ab8e7096c17a0eeaf4.png
[18905690-0f971138219eed86.png]: /images/20230810/f369afaadd564f4aad4ed3f4c9858b0f.png
[18905690-17ba79c2455f6498.png]: /images/20230810/7b495306a12443a8ae2f3a47cc45c244.png
[18905690-e32af2671363678b.png]: /images/20230810/611a59d629c94e9ebcd26ecc8b4f2d3a.png

发表评论取消回复

表情：

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

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

相关阅读

相关事件对象

1 什么是事件对象用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event

谁践踏了优雅/ 2023年08月17日 15:38/ 0 赞/ 114 阅读

相关 jQuery事件对象

学习要点： 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但由于浏览器的兼容性，开发者总是会做兼

谁借莪１个温暖的怀抱￠/ 2022年08月18日 15:14/ 0 赞/ 172 阅读

相关事件流、事件处理程序、事件对象

首先了解几个概念，事件流、事件和事件处理程序。事件流：是指页面接收到事件的顺序，通俗点就是事件在子元素和父元素间的传递顺序。事件：用户与浏览器进行交互的动作。

╰+哭是因爲堅強的太久メ/ 2022年06月06日 04:23/ 0 赞/ 269 阅读

相关 Jquery基础事件&&事件对象

//事件对象 1. //focus()和blur()必须是当前元素才能激活是否获取焦点的方法 //focusin()和focu

布满荆棘的人生/ 2022年06月02日 03:06/ 0 赞/ 302 阅读

相关事件对象和事件源对象

事件对象 <body> <div style="width: 300px;height: 300px;background: red;">

港控/mmm°/ 2022年05月26日 11:08/ 0 赞/ 203 阅读

相关 js 事件对象

js 是面向对象的，每次这么说一遍，总有一天会深入理解这个概念的；我们来看看事件对象，我们先简单的从概念上描述一下什么是事件对象：我们都知道事件，比如clic

「爱情、让人受尽委屈。」/ 2022年05月25日 02:46/ 0 赞/ 168 阅读

相关 jQuery_事件对象

在浏览器客户端应用平台，基本上都是以事件驱动的，即某个事件发生，然后做出相应的动作。浏览器的事件表示的是某些事情发生的信号。一.什么是事件对象？ $('b

小咪咪/ 2022年05月20日 23:52/ 0 赞/ 232 阅读

相关鼠标事件事件对象

事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘

Dear 丶/ 2022年05月17日 11:46/ 0 赞/ 310 阅读

相关对象拖动事件

一介绍拖放对象事件包含ondrag、ondragend和ondragstart事件。 ondrag事件是当某个对象被拖动时触发事件处理程序。 ondragend事件是

系统管理员/ 2022年05月12日 00:03/ 0 赞/ 186 阅读

相关事件对象

事件对象：在事件触发时由浏览器传递给事件的接收事件对象：在事件处理函数中接收事件对象事件对象坐标：事件对象的坐标包括clientX和clientY，screenX和

秒速五厘米/ 2021年11月09日 05:52/ 0 赞/ 225 阅读