JavaScript事件对象参数

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

JavaScript事件对象参数



1.概述


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

例如:


1c8822664e3f44e38a794894c5f62840.png


2.鼠标触发事件:比如onclick、onmouseover


(1)event.target:获取事件源对象


(2)event.srcElement:获取事件源对象


(3)event.type:获取事件类型


(4)event.clientX:获取当前鼠标在网页上的横坐标,只跟网页的可视区域有关


(5)event.clientY:获取当前鼠标在网页上的纵坐标,只跟网页的可视区域有关


(6)event.screenX:获取当前鼠标在当前显示器的横坐标


(7)event.screenY:获取当前鼠标在当前显示器的纵坐标


(8)evt.button:获取鼠标点击的哪个键


3.键盘触发的事件

event.keyCode:获取点击的键盘键码,它不是ASCII码


evt.altKey:获取是否点下了功能键(alt),返回值是true或false


evt.shiftKey:获取是否点下了功能键(shift)


evt.ctrlKey:获取是否点下了功能键(Ctrl)

目录
相关文章
|
JavaScript 前端开发
JavaScript 事件对象
JavaScript 事件对象
184 2
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
501 63
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
242 4
JavaScript基础知识-函数的参数
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
214 3
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
262 1
|
JavaScript
JS获取浏览器地址栏的多个参数值的任意值
JS获取浏览器地址栏的多个参数值的任意值
426 3
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
727 0
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
1489 2
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
301 3