js的事件

简介: js的事件

JS(JavaScript)是基于对象(Object-based)、事件驱动的脚本语言。

JS事件,就是用户或浏览器本身的某种行为,一般是用户对页面的一些动作引起的,例如,单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时,您可以使用 JavaScript 中的事件处理程序(也可称为事件监听器)来检测并执行某些特定的程序。JS(JavaScript)与HTML 之间的交互是通过事件(event)实现的,或者说,事件是JavaScript和DOM之间进行交互的桥梁。

一般情况下事件的名称都是以单词on开头的,例如点击事件 onclick、页面加载事件 onload 等。

JavaScript常见的事件大体分类及常用事件:

1)鼠标事件

事件         说明

onclick     鼠标单击事件

onmouseover   鼠标移入事件

onmouseout    鼠标移出事件

onmousedown     鼠标按下事件

onmouseup     鼠标松开事件

onmousemove        鼠标移动事件

2)键盘事件

onkeydown       键盘按下

onkeyup         键盘松开

3)表单事件

onfocus         获取焦点时触发

onblur          失去焦点时触发

onselect        选中“单行文本框”或“多行文本框”中的内容时

onselectstart   开始一个新的选择时

onchange        具有多个选项的表单元素选择某一项时触发

4)编辑事件

oncopy          复制(拷贝)时触发

onselect        页面内容被选取时触发

oncontextmenu   按下鼠标右键时触发

5)页面事件

onload           文档加载完成后触发

onbeforeunload    离开页面之前触发

JS的事件的处理及结果同浏览器的环境都有很大的关系,浏览器的版本越新,支持事件就越多,支持的也越完善。

事件调用通常是通过操作HTML属性的方式来实现的,可称为“事件处理器”(event handler)方式,又分为两种:在script标签中调用事件和在元素中调用事件。还有另外一种添加事件的方式,可称为“事件监听器”(event listener)方式,使用addEventListener() 和 removeEventListener()方法。

(1)在script标签中调用事件

这种方式是在JavaScript中设置事件属性。

在script标签中调用事件,指的是在< script >< /script >标签内部调用事件。语法:

obj.事件名 = function()

其中,bj是一个DOM对象,所谓的DOM对象,指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

这种事件调用方式就是操作元素的属性。只不过这个属性不是一般的属性,而是“事件属性”。

目录
相关文章
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
2210 0
|
2月前
|
网络协议 应用服务中间件 网络安全
阿里云SSL免费申请流程,共20张免费SSL,跟着教程一步步操作(新手一看就懂)
2025年阿里云免费SSL证书申请流程更新,提供Digicert品牌单域名证书,每个账号可申领20张,有效期3个月。通过数字证书管理控制台操作,支持域名DNS验证及多种服务器证书下载。免费版不支持续费,到期重新申请。
|
12月前
|
搜索推荐 前端开发 数据安全/隐私保护
改善用户体验方法
【10月更文挑战第9天】改善用户体验方法
723 3
|
12月前
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
1317 129
elementUI使用Pagination分页组件增加自定义slot
本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容,可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码,展示了如何添加两个自定义slot,并展示了最终效果。
1403 4
elementUI使用Pagination分页组件增加自定义slot
|
12月前
|
Web App开发 前端开发 JavaScript
JavaScript Web Full Stack 全栈开发者路线及内容推荐
本文详细介绍了一条全面的JavaScript全栈开发者学习路径,涵盖基础知识、前端和后端开发、数据库与API、MERN Stack与React Native、工程化与部署、安全与测试、未来趋势等方面。推荐了HTML5、CSS3、JavaScript(ES6+)、Node.js、React.js、Vue.js、Svelte、Tailwind CSS、Web Components等关键技术,并提供了丰富的书籍、博主和在线资源。此外,还回顾了JavaScript的历史,并推荐了多个活跃的社区和平台,帮助开发者紧跟技术前沿。
|
测试技术 Linux Docker
【好玩的开源项目】Docker部署cook菜谱工具
【7月更文挑战第19天】Docker部署cook菜谱工具
270 1
|
JSON JavaScript 前端开发
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
1595 0
VUE element-ui之table表格前端自动过滤(筛选),不调用数据接口筛选表格,方法
|
移动开发 小程序 JavaScript
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
uniapp中uview组件库丰富的Slider 滑动选择器的使用方法
1405 1
|
JavaScript 前端开发 安全
js中?.、??、??=的用法及使用场景
【8月更文挑战第8天】 js中?.、??、??=的用法及使用场景
3466 1