JavaScript常用事件详解

已于 2022-11-17 17:59:31 修改
阅读量1.3k 收藏 4
点赞数 2
文章标签： javascript 前端 开发语言
于 2022-11-17 17:58:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49194786/article/details/127907964
版权

一、概述

      作为一种脚本语言，JavaScript代码不能独立运行，通常情况下我们是需要借助浏览器来运行JavaScript代码，所有Web浏览器都支持JavaScript。

 二、特点

2.1  解释型脚本语言

2.2 面向对象

2.3 弱类型

2.4 动态性

2.5 跨平台

三、常见事件

      JS事件是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文字、按下键盘上的某个按键、移动鼠标等等。当事件发生时，可以使用JavaScript中的事件处理程序来检测并执行某些特定的程序。

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

3.1鼠标、键盘事件

onclick   点击鼠标时触发此事件

ondblclick    双击鼠标时触发此事件

onmousedown   按下鼠标时触发此事件

onmouseup   鼠标按下后又松开触发此事件

onmouseover  当鼠标移动到某个元素上方时触发此事件

onmouseout     当鼠标离开某个元素范围时触发此事件

onkeypress    当按下并松开键盘上的某个键时触发此事件

onkeyup    当放开键盘上的某个按键时触发此事件

3.2 窗口事件

onabort   图片在下载过程中被用户中断时触发此事件

onbeforeunload    当前页面的内容将要被改变时触发此事件

onerror   出现错误时触发此事件

onload   页面内容加载完成时触发此事件

onmove  当移动浏览器的窗口触发此事件

onresize    当改变浏览器的窗口大小时触发此事件

onscroll    当滚动浏览器的滚动条时触发此事件

onstop    当按下浏览器的停止按钮或者正在下载的文件被中断执行的操作

oncontextmenu   当弹出右键上下文菜单时触发此事件

onunload     改变当前页面时触发此事件

3.3  表单事件

onblur  当前元素失去焦点时触发此事件

onchange  当前元素失去焦点并且元素的内容发生改变时触发此事件

onfocus  当某个元素获得焦点时触发此事件

onreset    当点击表单中的重置按钮时触发此事件

onsubmit    当提交表单时触发此事件

四、代码实例

<!DOCTYPE  html>

<htmi lang = "en">

<head> 

        <meta charset = "UTF-8">

         <title>JavaScript</title>

</head>

<body>

        <button type="button" οnclick="my()">按钮</button>

        <script type="text/javascript">

        function my(){

       alert("Hello World!");

}

  </script>

</body>

</html>

  方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>

目录

一、概述

最低0.47元/天 解锁文章
.suki...
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JavaScript中 事件处理的四种方式
weixin_48937623的博客
03-10 824
在javascript中给html标签绑定事件并处理有着四种基本方式。每种方式都有着各自的优缺点。 ① 手工触发 用法 在HTML代码中用事件属性执行代码或函数。 优点 使用直接、简单，哪个HTML标签要触发什么事件，则就在该HTML标签上加事件属性。 缺点 不能做到JS与HTML完全分离。 实现 <input type="text" value="这是手工触发方式" onclick="Bd()"> <script> function Bd(){
js事件大全
nick_zhang的博客
07-19 1569
注意原生的事件在on后面都是小写，监听事件不需要加on 1. onclick　　点击事件 2. ondblclick　双击事件 3. onchange　 内容变化事件（在值改变时，并且失去焦点） 4. onfocus　　元素获取焦点事件 5. onblur 元素失去焦点事件（不管值是否改变，失去焦点及触发） 6. onmouseover（移入）　onmouseout（移出）　鼠标经过时自身触发事件，经过其子元素时也触发该事件（冒泡，多次触发） 7. onmouseenter（移入） on
JavaScript常用事件集合，前端小白必备（写的很详细，建议收藏）
最新发布
2401_84093899的博客
04-03 1312
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。[外链图片转存中…(img-K8cIOBMm-1712122004098)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-TgKbzjKM-1712122004099)]
JS的事件介绍
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
JavaScript中常见的事件
秦哥的博客
09-16 6748
目录 0.码仙励志 1.onclick()  鼠标左键单击事件 2.onmouseover  鼠标进入事件 3.onmouseout  鼠标离开事件 4.onfocus  获取焦点事件 5.onblur  失去焦点事件 6.onmousemove  鼠标移动事件 7.onscroll  滚动条滚动事件 8. onkeydown / onkeyup  键盘按下/抬起事件 1.ke...
JavaScript事件概述
X18406432083的博客
09-09 285
JavaScript事件概述
JavaScript 常用函数库详解
10-29
因此，开发者们创建了许多常用的 JavaScript 函数库，以增强其功能和易用性。 本文将介绍一些常见的 JavaScript 函数，这些函数在诸如 jQuery、Prototype、Dojo 等知名库中也经常出现。为了方便阅读和引用，这些...
JavaScript String 对象常用方法详解
10-22
下面小编就为大家带来一篇JavaScript String 对象常用方法详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript的数组和常用函数详解
10-25
主要介绍了javascript的数组和常用函数详解,非常详细，适合新手学习,需要的朋友可以参考下
javascript常用经典算法详解
10-20
JavaScript是一种广泛用于Web开发的脚本语言，其在处理数据和逻辑时，算法起着至关重要的作用。本文将详细解析JavaScript中的七种经典排序算法，包括冒泡排序、插入排序、希尔排序、归并排序、快速排序、选择排序和...
Javascript字符串常用方法详解
10-21
本文将深入解析JavaScript字符串的常用方法，帮助开发者更好地理解和应用这些功能。 首先，字符串的`length`属性是一个非常基础且重要的特性，它返回字符串中字符的数量。例如，`var str = "hello"; str.length;`将...
JavaScript 弹窗事件
Linkqwe的博客
07-05 440
关于JS的三个弹窗事件
JavaScript 窗口事件 onload
houyanhua1的专栏
11-07 690
窗口事件 onload，在网页一打开的时候发生（注意：必须是把所有东西都加载完成之后才会执行） 1)  2) window.onload=init  JavaScript中。注意：函数名init之后没有括号 onload窗口事件 window.onload=init; //第二种方式，在 JavaScript 中设置，init后没有括号 f
JavaScript（二）：对象、注释、事件！
weixin_43955769的博客
12-26 439
    对象 JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。 注释 ...
javascript事件处理
wukai_std的博客
11-20 600
JS事件添加的兼容性问题事件是javascript和HTML交互基础,任何文档或浏览器窗口发生的交互,都要通过绑定事件方法进行交互.DOM0级,DOM2级,IE事件处理DOM0级事件 DOM0级事件是直接为HTML元素添加事件处理属性,例如为input添加点击事件 可以<input id="b1" type="button" onclick="alert('hello')" value="点击">或
JS实现的文本框内容发生改变立马触发事件简介
热门推荐
CathyLou的博客
10-18 1万+
onchange事件: 此事件会在元素内容发生改变（由键盘或者鼠标事件激发，脚本触发无效），且失去焦点的时候触发。浏览器支持度较好。 onpropertychange事件： 此事件会在元素内容发生改变时立即触发，即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件，不止是value。但它是IE专属的。只有IE11以下浏览器支持此事件。 oninput事件: 此
js：怎么使用事件的绑定
dzahao的博客
10-12 1020
js：怎么使用事件的绑定
JavaScript高级(6)
Text789的博客
03-22 1147
1.常见的事件 (1)页面初始化事件 onload <script> function testLoad(){ alert("页面初始化事件"); } </script> <body onload="testLoad();"> <script> （2）按钮点击事件 onclick <script> function testclick(){ alert("按钮点击事件"); } </s...
JS笔记 窗口事件 定时器 Locatio对象 history对象
yogur_father的博客
12-04 168
一.页面加载 以前是先写HTML再写JS，但是我们如果使用window.onload = function() {} 或者window.addEventListener("load",function() { } ) 这样就能把JS写在HTML之前了 如果使用document.addEventListener("DOMContentLoaded", function() {} ),这个是等标签加载完了（不加载图片等样式），就可以交互了 二.页面大小 window.addEventListener("res
JavaScript的设计模式详解
09-07
JavaScript的设计模式详解是一本由涂根华所写的书籍，它非常详细地介绍了JavaScript的设计模式。这本书以单例模式为开篇，单例模式保证一个类只有一个实例，并提供一个全局访问点。这是一种常用的模式，可应用于许多...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值