JavaScript的学习之事件的简介

news2024/9/19 10:51:37

目录

一、事件是什么

二、如何处理事件


一、事件是什么

定义:事件就是浏览器和用户之间的交互行为。

例如:点击按钮、鼠标移动、关闭窗口等。

二、如何处理事件

我们可以在对应的事件属性中设置一些JS行为,当事件触发的时候会将这些代码执行。

示例代码:

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<button onclick="alert('不要点我啦!!!')">
			这是一个按钮</button>
		<script>
		</script>
	</head>
	<body>
	</body>
	</body>

</html>

由于在属性里面加入JS,会使得结构和行为耦合,不方便维护,不推荐使用.

可以为按钮的对应事件绑定处理函数的形式来响应事件

代码优化;

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<button id="btn">
			这是一个按钮</button>
		<script>
			var btn = document.getElementById('btn');
			btn.onclick = function(){
				alert('不要再点啦!!');
			};
		</script>
	</head>
	<body>
	</body>
	</body>

</html>

 比较推荐这种方式。

上节学习链接:

JavaScript的学习之DOM简介

感谢大家的学习,一起加油哈!!! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1858629.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java的输入流FileInput Stream类

一、定义 使用InputStream类的FileInputStream子类实现文本文件内容的读取。 二、常用构造方法 三、使用FileInput Stream类按多字节读取数据 1.示例 2、分析 四、常见错误 今天的总结就到这里啦&#xff0c;拜拜&#xff01;

Windows操作系统安装mysql数据库(zip安装包)

MySQL是目前最为流行的开放源码的数据库&#xff0c;是完全网络化的跨平台的关系型数据库系统&#xff0c;它是由瑞典MySQLAB公司开发&#xff0c;目前属于Oracle公司。任何人都能从Internet下载MySQL软件&#xff0c;而无需支付任费用&#xff0c;并且“开放源码”意味着任何人…

活动预告|探索 LLM 大模型的小型化 —— 微软 Phi3在 NVIDIA Jetson 与 NIM 平台的最佳实践

在当前高速发展的人工智能领域&#xff0c;如何高效的部署和优化 SLM (小型的大模型) 成为关键。随着微软 Phi-3 系列模型的发布&#xff0c;让 SLM 在 NVIDIA Jetson 边缘计算平台上的部署成为可能。同时 Phi-3 系列模型已在 NVIDIA NIM 平台提供加速的推理服务。 NVIDIA NIM…

msvcp120.dll丢失怎么办,找不到msvcp120.dll的多种解决方法

最近&#xff0c;我在运行一个程序时遇到了一个错误&#xff0c;系统提示找不到msvcp120.dll文件&#xff0c;无法继续执行代码。这让我感到非常困扰&#xff0c;因为这个问题导致我无法正常运行这个程序。经过一番搜索和尝试&#xff0c;我找到了几种修复这个问题的方法&#…

ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率

文章目录 前言ONLYOFFICE 桌面编辑器8.1一、PDF编辑&#xff1a;告别“头痛”时刻二、幻灯片版式&#xff1a;秒变“设计大师”三、无缝切换&#xff1a;办公界的“快速通道”四、语言支持&#xff1a;全球通吃的“翻译官”五、 隐藏“连接到云”板块&#xff1a;摆脱“云”的束…

RocketMQ如何添加JVM监控

这里是小奏,觉得文章不错可以关注公众号小奏技术 JVM监控选型 本次JVM监控我们采用prometheus官方提供的jmx_exporter来实现 RocketMQJVM开发 整体目录 1. 新增agent目录 我们在distribution目录新增一个agent模块&#xff0c;然后添加两个文件 jmx_prometheus_javaagent-…

Mysql索引底层数据结构——Java全栈知识(28)

Mysql索引底层数据结构 1、什么是索引 索引在项目中还是比较常见的&#xff0c;它是帮助MySQL高效获取数据的数据结构&#xff0c;主要是用来提高数据检索的效率&#xff0c;降低数据库的IO成本&#xff0c;同时通过索引列对数据进行排序&#xff0c;降低数据排序的成本&…

低价可转债崩盘,发生了什么?

下跌不在于“出库”&#xff0c;甚至不在于“风险”。问题更多在于交易层面&#xff0c;何时能积聚更多的左侧资金并成功过渡至右侧。 低价券怎么了&#xff1f; 如果说6月初主要是小微盘品种的退市风险&#xff0c;后来是一些评级下调的品种&#xff0c;到本周&#xff0c;已…

【Godot4自学手册】第四十二节实现拖拽进行物品交换和数量叠加

这一节我们主要学习背包系统中的物品拖拽后&#xff0c;物品放到新的位置&#xff0c;或交换物品位置&#xff0c;如果两个物品属于同一物品则数量相加。具体效果如下&#xff1a; 一、修改item.tscn场景 给item.tscn场景的根节点Item添加Label子节点&#xff0c;命名为Numv…

【计算机视觉】人脸算法之图像处理基础知识(六)

图像直方图 图像直方图是描述图像中像素强度分布的一种统计图表&#xff0c;它是图像处理和计算机视觉领域中一个非常基础且重要的概念。图像直方图通常用于分析图像的亮度、对比度特性&#xff0c;以及在图像增强、阈值分割、特征提取等多种图像处理任务。 import cv2 impor…

HTTPS 代理的优点和缺点是什么?

HTTPS&#xff08;超文本安全传输协议&#xff09;作为一种基于HTTP加上SSL安全层的网络通信协议&#xff0c;已经成为互联网上广泛使用的IP协议之一。它在保证信息安全和隐私方面具有很多优势&#xff0c;但也存在一些缺点。接下来&#xff0c;我们就来探究一下HTTPS协议的优缺…

日牵物流装备受邀盛装亮相2024长三角快递物流供应链与技术装备展览会(杭州)

日牵物流装备受邀盛装亮相2024长三角快递物流供应链与技术装备展览会&#xff0c;为物流节省每一个铜板&#xff0c;3C馆A21与您相约&#xff01; 日牵物流装备始建于1995年&#xff0c;总部坐落于辽宁省大连市&#xff0c;是一家集科研开发、生产制造、销售服务于一体的现代化…

HTML5【新特性总结】

HTML5【新特性总结】 HTML5 的新增特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题&#xff0c;基本是 IE9 以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量使用这些新特性。…

Bootstrap和Bagging算法以及衍生算法

1. Bootstrap算法 实际上就是一种针对小样本的无放回式的抽样方法&#xff0c;通过方差的估计可以构造置信区间。 其核心思想和基本步骤如下&#xff1a;   &#xff08;1&#xff09; 采用重抽样技术从原始样本中抽取一定数量&#xff08;自己给定&#xff09;的样本&#…

今日分享:中国石油年金系统交互、视觉设计和vue开发

金融系统交互及UI设计时&#xff0c;需注意简洁明了、色彩合理、字体统一、交互易用、安全感和用户控制。确保用户快速理解、安全操作并提升体验。

vue elementui 封装图片、视频集合组件 组件的基本应用

用红线框起来的地方理论上用的是同一套代码 那么就可以封装成组件 //父级页面的调用 <div class"title">活动缘起</div> <div class"grid-content bg-gray-light">...<pv-box v-if"form && form.originMaterials &…

汇聚荣电商实力好不好?

在数字化浪潮的推动下&#xff0c;电商平台如雨后春笋般涌现&#xff0c;而“汇聚荣”作为其中的一员&#xff0c;其综合实力自然成为业界与消费者关注的焦点。那么&#xff0c;汇聚荣电商的实力究竟如何呢?接下来&#xff0c;我们将从多个维度深入探讨这一问题。 一、品牌影响…

win10 修改远程桌面端口,在Win10上修改远程桌面端口的要怎么操作

在Windows 10上修改远程桌面端口是一个涉及系统配置的过程&#xff0c;这通常是为了增强安全性或满足特定网络环境的需要。 一、通过注册表编辑器修改远程桌面端口 1. 打开注册表编辑器&#xff1a; - 按下Win R组合键&#xff0c;打开“运行”对话框。 - 在“运行”对话框…

科技赋能冷链园区:可视化带来全新体验

应用图扑可视化技术&#xff0c;冷链园区能够更加直观地监控和管理资源&#xff0c;优化运作流程&#xff0c;提高运营效率与服务质量。

大型语言模型(LLM)和多模态大型语言模型(MLLM)的越狱攻击

随着大型语言模型&#xff08;LLMs&#xff09;的快速发展&#xff0c;它们在各种任务上表现出了卓越的性能&#xff0c;有效地遵循指令以满足多样化的用户需求。然而&#xff0c;随着这些模型遵循指令的能力不断提升&#xff0c;它们也越来越成为对抗性攻击的目标&#xff0c;…