JavaScript常用事件详解

已于 2022-11-16 10:05:13 修改
阅读量433 收藏
点赞数
文章标签： javascript html
于 2022-11-16 10:03:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51012353/article/details/127879138
版权

目录

onclick

onmouseover

onmouseout

onkeyup

onchange

onfocus

onblur

下面是一些常见的JavaScript事件

事件描述
onclick在元素上点击鼠标左键触发该事件
onmouseover指鼠标移动到元素之上时触发的事件
onmouseout是鼠标从元素上离开时触发
onkeyup放开键盘上某个按键时触发
onchange当元素失去焦点并且元素的内容被修改时触发
onfocusonfocus事件是当元素获得焦点时触发
onblur当元素失去焦点时触发

详情：

onclick

 在元素上点击鼠标左键触发该事件

语法：

HTML中：

 <element οnclick="SomeJavaScriptCode">

JavaScript 中:

 object.οnclick=function(){SomeJavaScriptCode};
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

onmouseover

事件会在鼠标指针移到指定的对象时发生

语法

HTML中：

 <element οnmοuseοver="SomeJavaScriptCode"></element>

JavaScript：

 object.οnmοuseοver=function(){SomeJavaScriptCode};
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签

onmouseover 属性可使用于所有 HTML 元素，除了: <base>, <bdo>, , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

onmouseout

事件会在鼠标指针移出指定的对象时发生

语法

HTML：

 <element οnmοuseοut="SomeJavaScriptCode"></element>

JavaScript:

 object.οnmοuseοut=function(){SomeJavaScriptCode}
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

onmouseout 属性可使用于使用 HTML 元素，除了: <base>, <bdo>, , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

onkeyup

定义和用法：

onkeyup 事件会在键盘按键被松开时发生。

提示：与onkeyup事件相关的事件发生次序

1.onkeydown

2.onkeypress

3.onkeyup

语法：

HTML:

 <element οnkeyup="SomeJavaScriptCode"></element>

JavaScript中:

 object.οnkeyup=function(){SomeJavaScriptCode}
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持 onkeyup 事件的 HTML 标签：

onkeyup 属性可以适用于所有 HTML 元素，除了： <base>, <bdo>, , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>。

onchange

定义和用法：

onchange 事件会在域的内容改变时发生。

onchange 事件也可用于单选框与复选框改变后触发的事件。

语法：

HTML中：

 <element οnchange="SomeJavaScriptCode"></element>

JavaScript中：

 object.οnchange=function(){SomeJavaScriptCode};
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持 onchange 事件的 HTML 标签：

onchange 属性可以使用于： <input>, <select>, 和 <textarea>。

onfocus

定义和用法：

onfocus 事件在对象获得焦点时发生

Onfocus 通常用于<input>,<select>,和<a>

提示：onfocus 事件的相反事件为onblur事件

语法：

HTML中：

 <element οnfοcus="SomeJavaScriptCode"></element>

JavaScript中

 object.οnfοcus=function(){SomeJavaScriptCode}

JavaScript中，使用addEventListenter（）方法：

 object.addEventListener("focus",myScript)
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持 onfocus 事件的 HTML 标签：

onfocus 属性通常用于所有 HTML 元素，除了：<base>, <bdo>, , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

onblur

定义和用法：

onblur 事件会在对象失去焦点时发生

Onblur 经常用于Javascript验证码代码，一般用于表单输入框

提示：onblur相反事件为onfocus事件

语法

HTML中：

 <element οnblur="SomeJavaScriptCode"></element>

JavaScript中：

 object.οnblur=function(){SomeJavaScriptCode}
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持 onblur 事件的 HTML 标签：

onblur 属性可以适用于所有 HTML 元素,除了： <base>, <bdo>, , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

总结

        本篇仅列出常用事件，比如：鼠标、键盘、表单事件；每个事件都对应了某个动作，我们只需要知道他的作用和语法规则就可以。

谁偷了我的袈裟？
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript常用事件
weixin_61562639的博客
07-03 107
注：onmouseover / onmouseout 与 onmouseenter / onmouseleave区别onmouseover / onmouseout 事件，目标元素如果有子级元素的话，它会把事件传递给子集元素onmouseenter / onmouseleave 事件，目标元素如果有子集元素，事件不会被传递给子集元素注：支持onfocus的对象button、checkbox、fileUpload、layer、frame、password、radio、reset、select、submit、t
JS-事件
hello world
06-01 5694
/事件源 box //on事件类型 onclik //事件的处理程序是 通过函数赋值;IE浏览器中 可以通过e.cancelBubble = true 进行阻止事件的冒泡 //取消冒泡。网页中的每个元素都可以产生某些可以触发JavaScript的事件.事件冒泡：当点击时 事件从最精确的元素 一层一层往上触发 直到最顶层元素 这个过程叫做事件冒泡。[ add 添加] [Event 事件 ] [listner 监听,听众]console.log('代码会在box被点击后执行');
JavaScript中的常用事件合集
fsLees的博客
07-26 318
JavaScript常用事件合集
JavaScript 事件大全
weixin_53188576的博客
09-07 117
JavaScript 中的事件为我们提供了与用户交互和响应用户行为的能力。通过事件，我们可以捕获用户的操作，并触发相应的函数或代码块。除了上述事件，JavaScript 还有许多其他类型的事件可供使用。可以根据具体的开发需求，选择合适的事件来实现相应的交互效果。通过了解不同类型的 JavaScript 事件，我们可以更好地与用户交互，实现动态和响应式的网页开发。以上就是 JavaScript 中的事件大全。为 “myButton” 的按钮时触发匿名函数中的代码，将 “按钮被点击了！以上代码会在用户点击。
JavaScript事件
weixin_43466575的博客
04-10 544
1、事件概述 （1）事件 事件：可被理解为是JavaScript侦测到的行为。 举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。 （2）事件处理程序 事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。 举例：用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。 （3）事件驱动式 事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为
JavaScript常用事件和方法
diran5261的博客
09-19 167
常用方法： 使用 window.alert() 弹出警告框。 使用 document.write() 方法将内容写到 HTML 文档中。 使用 innerHTML 写入到 HTML 元素。 使用 console.log() 写入到浏览器的控制台。 调试用console.log()而非alert() 使用 document.getElementById(id) 获取元素 常用事件: 鼠标 ...
JavaScript 常用函数库详解
10-29
因此，开发者们创建了许多常用的 JavaScript 函数库，以增强其功能和易用性。 本文将介绍一些常见的 JavaScript 函数，这些函数在诸如 jQuery、Prototype、Dojo 等知名库中也经常出现。为了方便阅读和引用，这些...
javaScript 页面自动加载事件详解
10-26
这是最基础也是最常用的页面加载事件之一。Window.onload事件在页面的DOM完全加载完成后触发。这意味着不仅整个HTML文档被解析完毕，页面上的所有元素，包括图片、脚本文件、CSS样式表等都已经完全加载完毕。该事件...
JavaScript String 对象常用方法详解
10-22
接下来，我们就来详细了解一下JavaScript String对象的常用方法。 首先，要明白一个基础概念：在JavaScript中，字符串是不可变的。这意味着一旦字符串被创建，它的内容无法被改变。当你尝试改变字符串的某一部分时...
javascript的数组和常用函数详解
10-25
数组的常用操作包括元素的增删改查、数组的遍历等。增加元素可以使用push()函数，删除元素可以使用pop()或splice()函数。数组的遍历可以使用for循环或for...in循环，前者用于按索引顺序访问数组元素，后者则在遍历...
javascript常用经典算法详解
10-20
JavaScript是一种广泛用于Web开发的脚本语言，其在处理数据和逻辑时，算法起着至关重要的作用。本文将详细解析JavaScript中的七种经典排序算法，包括冒泡排序、插入排序、希尔排序、归并排序、快速排序、选择排序和...
《前端》onclick= function() 、onclick= return function() 、return false的区别介绍。
BelleDiao的博客
05-21 1890
现在在做薪酬二期的。 οnclick="function()" 表示只会执行 function , 但是不会传回 function 中之回传值 onclick = "return function()" 则是 执行 function并传回 function 中之回传值。 <script> function doAlert() { var fail_this_check = true; if(fail_this_check) return false;
JavaScriptAPI编程_事件
JiuMeilove的博客
06-21 2万+
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为. 简单理解:触发—响应机制. 网页中每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某个按钮时产生一个事件,然后去执行某些操作事件是由三部分组成,事件源,事件类型,事件处理程序.我们也称为事件三要素示例 注册事件/绑定事件 注册事件概述 给元素添加事件,称之为注册事件或者绑定事件 注册事件有两种方式:传统方式和方法监听注册方式 传统注册方式 利用on开头的事件,例如oncli
js 动态加载function(onclick= function ())
小虫乱爬--爬爬也论技术 博客
05-07 3404
转:http://hi.baidu.com/deli9999/blog/item/3e19831d5a6dfa8786d6b62c.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >        function cancleEvent(){        d
onclick="function()"和onclick="return function();"区别
The_Best_Hacker的博客
04-08 5466
onclick="function()" 表示只会执行 function , 但是不会传回 function 中之回传值 onclick = "return function()" 则是 执行 function并传回 function 中之回传值 eg： <script> function doAlert() { var fail_this_chec...
JavaScript核心（三）
中资上事的博客
05-06 161
1.1 今日目标 能够说出js中常见的系统对象 能够查阅系统对象的常用方法 能够创建节点并添加到页面中 能够完成节点的替换，删除，克隆操作 能够获取元素的属性节点 能够修改或添加元素的属性节点 能够获取和设置元素的css样式 能够用多种方法获取（查找）页面中的节点 能够说出至少10个以上的事件名称 能够说出3种事件绑定方式及其区别 能够理解事件冒泡及捕获的过程,并能阻止冒泡事件 1.2 事...
JS 中 onclick 事件四种传参方式
热门推荐
稚枭天卓
11-02 4万+
1、在页面中给方法传参数，有如下的两种方法： 方法1，onclick=cancel(id，patientId); 在js文件中定义cancel方法 如果要把当前对象传过去用onclick="cancel(this,id,patientId)" js中cancel（obj，id，patientId） 方法2，在js中用 代码示例: jquery$(function(){ va
ECMAScript性能优化技巧与陷阱：深入探索与实践
最新发布
Chujun123528的博客
08-15 647
ECMAScript性能优化是一个复杂而细致的过程，需要开发者从多个角度进行考虑和优化。通过合理利用现代JavaScript特性、优化DOM操作、选择合适的算法和数据结构、利用Web Workers等技术手段，可以显著提升JavaScript代码的执行效率。同时，开发者还需要关注全局变量、闭包、eval等性能陷阱，避免不必要的性能开销。此外，性能监控与分析、内存管理、网络层面的优化等也是不可忽视的重要方面。只有综合考虑这些因素，并持续进行性能优化工作，才能为用户提供更加流畅、高效的Web应用体验。
JavaScript常用语句详解
"这份文档包含了107个JavaScript（JS）的常用语句，涵盖了从基本的输出语句、注释方法到复杂的DOM操作、函数定义以及窗口交互等多个方面，旨在帮助开发者掌握JavaScript编程的基础知识。" 在JavaScript编程中，以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值