js事件

最新推荐文章于 2019-07-13 12:17:00 发布
最新推荐文章于 2019-07-13 12:17:00 发布
阅读量120 收藏
点赞数
分类专栏： front

转自：http://www.runoob.com/js/js-events.html

 

目录

常见的HTML事件

全部事件

鼠标事件

键盘事件

框架/对象（Frame/Object）事件

表单事件

剪贴板事件

打印事件

拖动事件

多媒体（Media）事件

动画事件

过渡事件

其他事件

 

常见的HTML事件

<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<button οnclick="this.innerHTML=Date()">现在的时间是?</button>

常见的HTML事件

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

 

全部事件

鼠标事件

属性描述DOM
onclick当用户点击某个对象时调用的事件句柄。2
oncontextmenu在用户点击鼠标右键打开上下文菜单时触发 
ondblclick当用户双击某个对象时调用的事件句柄。2
onmousedown鼠标按钮被按下。2
onmouseenter当鼠标指针移动到元素上时触发。2
onmouseleave当鼠标指针移出元素时触发2
onmousemove鼠标被移动。2
onmouseover鼠标移到某元素之上。2
onmouseout鼠标从某元素移开。2
onmouseup鼠标按键被松开。2

键盘事件

属性描述DOM
onkeydown某个键盘按键被按下。2
onkeypress某个键盘按键被按下并松开。2
onkeyup某个键盘按键被松开。2

框架/对象（Frame/Object）事件

属性描述DOM
onabort图像的加载被中断。 ( <object>)2
onbeforeunload该事件在即将离开页面（刷新或关闭）时触发2
onerror在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) 
onhashchange该事件在当前 URL 的锚部分发生修改时触发。 
onload一张页面或一幅图像完成加载。2
onpageshow该事件在用户访问页面时触发 
onpagehide该事件在用户离开当前网页跳转到另外一个页面时触发 
onresize窗口或框架被重新调整大小。2
onscroll当文档被滚动时发生的事件。2
onunload用户退出页面。 ( <body> 和 <frameset>)2

表单事件

属性描述DOM
onblur元素失去焦点时触发2
onchange该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)2
onfocus元素获取焦点时触发2
onfocusin元素即将获取焦点时触发2
onfocusout元素即将失去焦点时触发2
oninput元素获取用户输入时触发3
onreset表单重置时触发2
onsearch用户向搜索域输入文本时触发 ( <input="search">) 
onselect用户选取文本时触发 ( <input> 和 <textarea>)2
onsubmit表单提交时触发2

剪贴板事件

属性描述DOM
oncopy该事件在用户拷贝元素内容时触发 
oncut该事件在用户剪切元素内容时触发 
onpaste该事件在用户粘贴元素内容时触发 

打印事件

属性描述DOM
onafterprint该事件在页面已经开始打印，或者打印窗口已经关闭时触发 
onbeforeprint该事件在页面即将开始打印时触发 

拖动事件

事件描述DOM
ondrag该事件在元素正在拖动时触发 
ondragend该事件在用户完成元素的拖动时触发 
ondragenter该事件在拖动的元素进入放置目标时触发 
ondragleave该事件在拖动元素离开放置目标时触发 
ondragover该事件在拖动元素在放置目标上时触发 
ondragstart该事件在用户开始拖动元素时触发 
ondrop该事件在拖动元素放置在目标区域时触发 

多媒体（Media）事件

事件描述DOM
onabort事件在视频/音频（audio/video）终止加载时触发。 
oncanplay事件在用户可以开始播放视频/音频（audio/video）时触发。 
oncanplaythrough事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。 
ondurationchange事件在视频/音频（audio/video）的时长发生变化时触发。 
onemptied当期播放列表为空时触发 
onended事件在视频/音频（audio/video）播放结束时触发。 
onerror事件在视频/音频（audio/video）数据加载期间发生错误时触发。 
onloadeddata事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。 
onloadedmetadata事件在指定视频/音频（audio/video）的元数据加载后触发。 
onloadstart事件在浏览器开始寻找指定视频/音频（audio/video）触发。 
onpause事件在视频/音频（audio/video）暂停时触发。 
onplay事件在视频/音频（audio/video）开始播放时触发。 
onplaying事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。 
onprogress事件在浏览器下载指定的视频/音频（audio/video）时触发。 
onratechange事件在视频/音频（audio/video）的播放速度发送改变时触发。 
onseeked事件在用户重新定位视频/音频（audio/video）的播放位置后触发。 
onseeking事件在用户开始重新定位视频/音频（audio/video）时触发。 
onstalled事件在浏览器获取媒体数据，但媒体数据不可用时触发。 
onsuspend事件在浏览器读取媒体数据中止时触发。 
ontimeupdate事件在当前的播放位置发送改变时触发。 
onvolumechange事件在音量发生改变时触发。 
onwaiting事件在视频由于要播放下一帧而需要缓冲时触发。 

动画事件

事件描述DOM
animationend该事件在 CSS 动画结束播放时触发 
animationiteration该事件在 CSS 动画重复播放时触发 
animationstart该事件在 CSS 动画开始播放时触发 

过渡事件

事件描述DOM
transitionend该事件在 CSS 完成过渡后触发。 

其他事件

事件描述DOM
onmessage该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发 
onmousewheel已废弃。 使用 onwheel 事件替代 
ononline该事件在浏览器开始在线工作时触发。 
onoffline该事件在浏览器开始离线工作时触发。 
onpopstate该事件在窗口的浏览历史（history 对象）发生改变时触发。 
onshow该事件当 <menu> 元素在上下文菜单显示时触发 
onstorage该事件在 Web Storage(HTML 5 Web 存储)更新时触发 
ontoggle该事件在用户打开或关闭 <details> 元素时触发 
onwheel该事件在鼠标滚轮在元素上下滚动时触发 

 

wangfy_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件处理
牧野枫凉的博客
09-08 260
1.对于页面上的一幅图片，鼠标悬停在图片上时切换成另一幅图，鼠标离开时，还原成原来的图片。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>7-1</title> </head> <body> <center...
js event事件
xinxin_zhu的博客
03-24 156
<html> <head> <title>event事件</title> <meta charset="utf-8"> <style> </style> </head> <body> <h2>事件监听 事件冒泡 ...
js 判断图片和视频是否加载成功
比你优秀的人比你还要努力
11-28 9401
图片： 失败： // 方法 1：更换图片地址 $('img').error(function(){     $(this).attr('src', '加载失败.png'); }); // 方法 2：隐藏它 $("img").error(function(){     $(this).hide(); });   成功 //jquery的方式 $("#imageId").lo...
HTML DOM 事件
akuibpt23191的博客
07-13 575
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
[JavaScript] audio在浏览器中自动播放
weixin_30426065的博客
02-14 1426
audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放。 如果设置了该属性，音频将自动播放。 使用 autoplay 属性进行播放 //使用autoplay属性 var src = "./award.wav"; var body = document.getElementsByTagName("body")[0]; ...
Javascript----HTML DOM 事件
iteye_6125的博客
06-18 489
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ [b]注：DOM： 指明使用的 DOM 属性级别。[/b] [b]1.鼠标事件[/b] 属性 描述 DOM [u]onclick ...
jem.js:Javascript 事件管理器
06-04
jem.js（Javascript 事件管理器） 这是一个 Javascipt 库，可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项，没有 jQuery，没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...
EventDispatcher,js事件派发器,javascript事件派发器
12-28
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
JavaScript事件学习小结（三）js事件对象
10-22
主要介绍了JavaScript事件学习小结（三）js事件对象的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
javascript事件思维导图
12-30
全面，直观javascript的事件
js事件监听机制(事件捕获)总结
12-04
JavaScript事件监听机制是前端开发中不可或缺的一部分，它用于处理页面元素的各种交互，如点击、鼠标移动等。在本文中，我们将深入探讨事件监听，特别是事件捕获这一概念，以及如何在不同的浏览器环境中实现兼容。 ...
Deep Coral源码（深度相关性学习）
07-25
Deep Coral（深度相关性学习）迁移学习网络资源 Deep Coral是一种先进的迁移学习技术，专注于通过学习源域和目标域之间的相关性来提高模型的泛化能力。这种方法在处理不同数据分布的问题时表现出色，尤其是在无监督领域自适应的场景中。 Deep Coral网络核心特点： 相关性学习 - Deep Coral通过学习源域和目标域特征之间的相关性，减少领域差异，提高模型的泛化能力。 无监督学习 - 该方法无需目标域的标签信息，即可实现有效的领域自适应，适合标签稀缺的场景。 灵活性 - 该网络结构灵活，可以适用于多种不同的迁移学习场景，包括但不限于图像分类、语义分割等。
codeforces round 961 (div. 2)
07-25
A题 思路：对角线上的个数为：n，n-1(2个)，n-2(2个)，n-3(2个),......，1(2个) AC代码： #pragma GCC optimize("O2") #pragma GCC optimize("O3") #include <bits/stdc++.h> using namespace std; #define int long long #define double long double typedef long long ll; typedef unsigned long long ull; typedef pair<int, int> pii; const int N = 1e5 + 5, M = 1e7 + 5, S = 1e6 + 5, inf = 0x3f3f3f3f3f3f3f3f, mod = 1e9 + 7; int n, k; void solve() { cin >> n >> k; vector<int> v; for (int i = n; i >= 1; i--) { if (i
毕业设计：基于Springboot的多媒体信息共享平台
07-25
随着信息时代的到来，传统武理多媒体信息共享管理方式的弊端日益显现。针对这些问题，本文分析了传统方式的不足，并采用计算机技术构建武理多媒体信息共享系统。通过查阅相关文献和研究国内外相关技术，本文提出了一种集作品信息管理与信息共享于一体的系统构建方案。 本系统采用B/S架构，结合Spring Boot框架和MySQL数据库技术，针对国内武理多媒体信息共享系统的现状进行开发。系统包含个人中心、用户管理、作品分类管理、作品信息管理、私聊信息管理、系统管理等多个功能模块。经过测试，本系统达到了设计目标，相较于人工管理方式，显著降低了武理多媒体信息共享管理的经济成本，并大幅提升了管理效率。
2022年河南省特岗教师招聘考试题（考生回忆版）.pdf
07-25
2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）.pdf2022年河南省特岗教师招聘考试题（考生回忆版）
b194红色革命文物征集管理系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
最新发布
07-25
红色革命文物征集管理系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现红色革命文物征集管理系统的功能。其中管理员管理用户，新闻公告。 红色革命文物征集管理系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，红色革命文物征集管理系统都可以轻松应对。 用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，还进行了对用户名称的模糊查询的条件。文物信息管理页面，此页面提供给管理员的功能有：查看已发布的文物信息数据，修改文物信息，文物信息作废，即可删除，还进行了对文物信息名称的模糊查询 文物信息信息的类型查询等等一些条件。论坛信息管理页面，此页面提供给管理员的功能有：根据论坛信息进行条件查询，还可以对论坛信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip
07-25
基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！ 基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库（毕业设计新项目）.zip
前端-JavaScrip-Promise-手写Promise
07-25
手写Promise源码 遵循Pormise/A+规范 适合学习Promise源码的同学
《AI大模型应用》--学生作业帮，包含文心一言应用，GPTs，通义千问以及相关插件服务.zip
07-25
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
JavaScript事件
09-09
JavaScript事件是指在Web页面中，通过JavaScript代码来侦测和响应用户的操作或系统的事件。事件可以是用户的鼠标点击、键盘按键、页面加载完成等等。事件驱动式是指JavaScript代码通过侦测到这些事件，并执行相应的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值