function(event)中的event详解

2024-05-10 19:24:52

目录:

一、function(event)中的event是什么?
二、为什么要加上function(event)中的event？
三、如果需要引入别的参数，那要怎么获取function(event)中的event呢？

一、function(event)中的event是什么？

event对象是个形式参数，代表事件的状态；比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

关于event对象

在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止.以下是event对象的一些属性和方法

属性	描述
altKey	返回当事件被触发时，”ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，”CTRL” 键是否被按下。
metaKey	返回当事件被触发时，”meta” 键是否被按下。

relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 shiftKey 返回当事件被触发时，”SHIFT” 键是否被按下。

二、为什么要加上function(event)中的event？

代码规范。
通过这个event，可以获取到event.target，点击对象一系列的属性。

三、如果需要引入别的参数，那要怎么获取这个function(event)中的event呢？

1、vue环境下，获取方法（亲测）
使用...arguments代表event，既不影响参数引入和获取，也和标准美观。

2、其它情况（网络推荐）

 var event = window.event || arguments.callee.caller.arguments[0]

参考文档：

https://www.cnblogs.com/websmile/p/8807334.html

https://zhidao.baidu.com/question/1772243508559247180.html

https://blog.csdn.net/qq_42341025/article/details/102582540?utm_medium=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-2.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task-blog-baidujs-2.nonecase

function(event)中的event详解相关推荐

mysql数据库定点任务_MySQL数据库Event定时执行任务详解
一.背景由于项目的业务是不断往前跑的,所以难免数据库的表的量会越来越庞大,不断的挤占硬盘空间.即使再大的空间也支撑不起业务的增长,所以定期删除不必要的数据是很有必要的.在我们项目中由于不清理数据,一 ...
zabbix Event acknowledgment事件确认详解以及一般填写什么内容
1,概述以往服务器出现报警,运维人员处理完事之后,报警自动取消,但是下一次出现同样一个错误,但是换了一个运维人员,他可能需要重新排查问题,直到问题处理完毕.针对这种情况,zabbix提供了event ...
protobuf前后端解析_前端后台以及游戏中使用google-protobuf详解
前端后台以及游戏中使用google-protobuf详解 [TOC] 0.什么是protoBuf protoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,与XML相比,protoBuf更小 ...
ALSA声卡驱动中的DAPM详解之四：在驱动程序中初始化并注册widget和route
前几篇文章我们从dapm的数据结构入手,了解了代表音频控件的widget,代表连接路径的route以及用于连接两个widget的path.之前都是一些概念的讲解以及对数据结构中各个字段的说明,从本章开 ...
DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
Python-Matplotlib可视化（番外篇）——Matplotlib中的事件处理详解与实战
Python-Matplotlib可视化(番外篇)--Matplotlib中的事件处理详解与实战前言事件连接事件属性实战1:直方图中矩形的拖拽实战2:鼠标进入和离开相关链接与参考前言在 ...
ALSA声卡驱动中的DAPM详解之六：精髓所在，牵一发而动全身
设计dapm的主要目的之一,就是希望声卡上的各种部件的电源按需分配,需要的就上电,不需要的就下电,使得整个音频系统总是处于最小的耗电状态,最主要的就是,这一切对用户空间的应用程序是透明的,也就是说,用 ...
oracle数据库中索值,Oracle数据库中的索引详解
Oracle数据库中的索引详解以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 一 ROWID的概念存储了row在数据文 ...
android调webview的方法,Android中的WebView详解
Android中的WebView详解 WebView详解基本用法布局文件配置WebView android:id="@+id/wv_news_detail" android:l ...

最新文章

热门文章