WebAPI-事件对象参数

╰半橙微兮° 2023-06-15 06:56 24阅读 0赞

## 概述 ##

事件触发后就会产生事件对象，与事件相关的信息都会存储在一个对象中；这个对象会以参数的形式传给事件处理函数，所以事件处理函数默认会有一个事件对象参数；想要使用这个事件对象只要给事件处理函数定义一个形参即可。

举个栗子：

<button id="btn">按钮</button>
    
    <script> function $(selector) { return document.querySelector(selector) } // 添加点击事件 $('#btn').onclick = function(e) { // 设置形参获取事件对象 // 打印事件对象 console.log(e) } </script>

![在这里插入图片描述][20191121084957340.gif]  
上面的例子是标准浏览器获取事件对象的方法，对于 IE 这个佬榴芒来说，IE6~IE8 不支持参数的形式获取事件对象。

IE6~IE8 获取事件对象是通过 `window.event` 来获取事件对象

<button id="btn">按钮</button>
    
    <script> function $(selector) { return document.querySelector(selector) } // 添加点击事件 $('#btn').onclick = function() { // 设置形参获取事件对象 // 打印事件对象 console.log(window.event) } </script>

## 事件对象常见的属性和方法 ##

*  `e.target` 获取触发此事件的元素（事件的目标节点），不一定是绑定事件的元素
 *  `e.srcElement` 同 e.target 不是标准的属性， IE6~IE8 使用
 *  `e.type` 返回事件的类型，不带前缀 `on`
 *  `e.cancelBubble` 用于阻止事件冒泡，非标准属性 IE6~IE8 使用；将属性赋值为 true 即可阻止事件冒泡
 *  `e.returnValue` 该属性用于阻止事件的默认行为，例如 a 标签的默认跳转；是非标准的属性 IE6~IE8 使用
 *  `e.preventDefault()` 阻止事件的默认行为，标准的方法
 *  `e.stopPropagation()` 该方法用于阻止事件冒泡，标准的方法

[20191121084957340.gif]: https://img-blog.csdnimg.cn/20191121084957340.gif

发表评论取消回复

表情：

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

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

相关阅读

相关 WebAPI-History对象

`history` 对象是 window 对象的一个属性，该对象包含了用户在浏览器窗口中访问过的 URL。属性 length `history.length`

客官°小女子只卖身不卖艺/ 2023年06月19日 06:46/ 0 赞/ 29 阅读

相关 WebAPI-Navigator对象

`navigator` 对象包含了浏览器相关的信息，通过相关的属性即可获取对应的浏览器信息 appName `navigator.appName` 获取浏览器的名称

我不是女神ヾ/ 2023年06月19日 05:29/ 0 赞/ 25 阅读

相关 WebAPI-Location对象

`location` 对象是 window 的一个属性，该对象包含了当前 URL 的相关信息。 URL `URL` 统一资源定位符（ `Uniform Resource

偏执的太偏执、/ 2023年06月19日 02:19/ 0 赞/ 218 阅读

相关 WebAPI-DOMContentLoaded事件

概述当初始的 HTML 文档被完全加载和解析完成之后，`DOMContentLoaded` 事件就会被触发，与 load 事件不同，该事件无需等待样式表、图像、flas

╰半夏微凉°/ 2023年06月16日 03:54/ 0 赞/ 23 阅读

相关 WebAPI-window对象的常见事件

概述 BOM 是 Browser Object Model 的缩写，就是浏览器对象模型；BOM 提供了与浏览器窗口进行交互的对象；BOM 就是由一系列相关的对象构成，并且

妖狐艹你老母/ 2023年06月16日 01:58/ 0 赞/ 92 阅读

相关 WebAPI-键盘事件

概述所谓键盘事件就是在按键被敲击时触发的一些事件，常见的键盘事件有：keyup（键盘抬起事件）、keydown（键盘按下事件）、keypress（键盘按下并抬起触发事件

梦里梦外;/ 2023年06月16日 01:50/ 0 赞/ 120 阅读

相关 WebAPI-鼠标事件对象中与坐标相关的属性

e.clientX `e.clientX` 获取鼠标相对于浏览器可视窗口区域的 X 坐标（横坐标） e.clientY `e.clientY` 获取鼠标相对于浏览

约定不等于承诺〃/ 2023年06月15日 15:25/ 0 赞/ 22 阅读

相关 WebAPI-事件委托

概述事件委托（也叫事件代理）主要是用来解决后生成的子元素（动态添加的元素）的事件绑定问题，有动态创建进来的新元素不需要重新绑定事件。实现原理：将事件绑定在已存在的父

怼烎@/ 2023年06月15日 11:13/ 0 赞/ 23 阅读

相关 WebAPI-事件对象参数

概述事件触发后就会产生事件对象，与事件相关的信息都会存储在一个对象中；这个对象会以参数的形式传给事件处理函数，所以事件处理函数默认会有一个事件对象参数；想要使用这个事件

╰半橙微兮°/ 2023年06月15日 06:56/ 0 赞/ 25 阅读

相关 WebAPI-DOM事件流

概述 js事件在触发时会在元素节点之间按照特定的顺序进行传播，这个传播的过程就是 DOM 事件流。例如：给页面中的一个 button 按钮注册了点击事件并进行了点击，

- 日理万妓/ 2023年06月15日 04:57/ 0 赞/ 33 阅读