JS基础——事件对象event

淡淡的烟草味﹌ 2022-07-16 05:53 247阅读 0赞

事件为什么会是对象呢？先了解一下事件处理

# 一、事件处理    #

JS在事件处理函数中提供了事件对象，帮助处理鼠标和键盘事件。同时还可以修改一些事件的捕获和冒泡流的函数。

事件处理分为三部分：对象.事件处理函数=函数

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  document.οnclick=**function**()\{   
2.      alert(**this**.value); //this代表着在该作用域中离它最近的对象。  
3.  \}

以上事件处理中，document为对象，click是事件处理类型，onclick为事件处理函数。function()为匿名函数，用于触发后执行。

那么什么是事件对象呢？当我们触发document的click事件时，便会产生一个事件对象，这个对象中包含着这个事件的相关信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。

小例子：

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  document.οnclick=**function**()\{  
2.      alert(arguments.length); //浏览器会默认传递一个参数  
3.      alert(arguments\[0\]);//\[object MouseEvent\]，如果是keydown,则为\[object KeyboardEvent\]  
4.  \}

可以看出，事件处理中，浏览器已经默认将一个参数传递过来了。而在 普通函数和匿名函数中，是不传递event对象的 。

event对象的接收：

在W3C中可以直接接受event对象，如：

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  input.onclick = **function** (evt) \{ //接受 event 对象，名称不一定非要 event  
2.      alert(evt); //MouseEvent，鼠标事件对象 IE不支持  
3.  \};

但是IE中，不支持直接接收，而是通过window.event来接收。

# 二、获取鼠标和键盘事件信息 #

1、鼠标事件

主要是在鼠标事件执行后，通过事件对象来获取相关事件的一些属性，比如左键还是右键。在按键时，是否按住了所规定的键值如ctrl,shift等常用键，或者鼠标点击的位置等相关信息。

通过clientX/Y来获取鼠标点击的在可视区域的横纵坐标，screenX/Y可获得在整个屏幕的横纵坐标。

关于修改键的一个小例子：

首先了解一下事件对象关于修改键的一些方法：

![SouthEast][]

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. window.οnlοad=**function**()\{  
2.     document.οnclick=**function**(evt)\{  
3.         **var** e=evt||window.event; <span style="font-family:SimSun;">//跨浏览器兼容事件对象  
4.         alert(getKey(evt));  
5.     \};  
6.       
7. \}  
8. **function** getKey(evt)\{  
9.     **var** e=evt||window.event;  
10.     **var** keys=\[\];  <span style="font-family:SimSun;">//创建一个数组，用来存放按下的键值  
11.       
12.     **if**(e.shiftKey) keys.push('shift');  
13.     **if**(e.ctrlKey) keys.push('ctrl');  
14.     **if**(e.altKey) keys.push('alt'); //单击+Alt和360快捷键冲突  
15.     **return** keys;  
16. \}

现在是不是对事件对象的功能有了一个大概的印象呢？看一下键盘事件

2、键盘事件

主要应用于按键时，获取按下各个键值的键码或字符编码。主要发生在keydown和keypress事件中

keycode：不区分大小写，与键盘上的键值位置一一对应。用于keydown和keyup事件

charcode：字符编码，区分大小写，其实返回的就是ASCII码。只支持keypress事件

# 三、事件流 #

事件流包括两种模式：冒泡和捕获。

1、冒泡：从里向外逐个触发。

2、捕获：从外向里逐个触发

事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候而层叠在你点击范围 ， 并不是只有当前被点击的元素会触发事件 ， 那么你点击其中一个元素的所有元素都会触发事件。而如果我们想要只触发其中一个事件时，此时就需要取消冒泡或捕获。现代浏览器默认都是冒泡类型，所以通常只需要取消冒泡即可。

如何取消？

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **function** stopPro(evt) \{  
2.     **var** e = evt || window.event;  
3.     window.event ? e.cancelBubble = **true** : e.stopPropagation(); <span style="font-family:SimSun;">//兼容W3C和IE  
4. \}

# 四、事件对象中的this传递问题    #

以上是关于事件对象的一些基础，此外，还需注意在现代事件绑定中匿名函数通过call来进行对象冒充时，传递参数时，第一个参数默认传递给要冒充的事件对象，而从第二个参数开始才开始真正传递给实际要传递的参数。什么意思呢？看一个小例子：

1、事件绑定函数

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. **function** addEvent(obj,type,fn)\{  
2.     **if** ( **typeof** obj.addEventListener!='undefined')\{ //W3C  
3.         obj.addEventListener(type,fn,**false**);  
4.     \}**else** **if**(**typeof** obj.attachEvent!='undefined')\{ //IE  
5.         obj.attachEvent('on'\+type,**function**()\{  
6.             fn.call(123<span style="font-family:SimSun;">,456,789); <span style="font-family:SimSun;">//利用对象冒充来解决this传递问题  
7.         \});  
8.     \}  
9. \}

2、调用

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1. window.οnlοad=**function**()\{  
2.   
3.     addEvent(document,'click',fn);  
4.   
5. \}  
6.   
7. **function** fn(a,b)\{  
8.   
9.     alert(**this**);//123，默认第一个参数为传递要冒充的对象，为123  
10.   
11.     alert(a);//call中从第二个参数起赋值给函数的参数，456   
12.   
13.     alert(b);<span style="font-family:SimSun;">//789  
14. \}

总结：事件对象即是事件触发时，浏览器传递给事件处理的一个对象，通过这个对象，我们可以获得相应时间处理的一些相关信息，以便于我们对接下来的操作做进一步处理。

[view plain]: http://blog.csdn.net/wangyy130/article/details/40514491#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/498870
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/498870/fork
[SouthEast]: /images/20220716/43a0a163009149ba83eb40624387b8fe.png