响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-1事件处理

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理</title>
</head><body>
<input id="btn" type="button" name="btn" value="提交" />
<script>var oBtn = document.getElementById('btn');oBtn.onclick = function(){alert('哎呀!点到我了!');};</script>
</body>
</html>

上述代码中:
第9行代码定义了一个id为btn的button元素。
第11行代码中的getElementById()方法是通过元素的id属性来获取元素的,在这里表示获取id为btn的元素。第12行代码给oBtn注册事件,语法为“oBtn.on事件类型”,事件类型click表示鼠标单击事件,这步操作实际上是为btn的onclick属性赋值一个函数,这个函数就是事件处理程序。

运行效果

在这里插入图片描述
单击“提交”按钮,弹出警示框。
在这里插入图片描述
事件驱动是JavaScript语言的一个最基本的特征。所谓事件是指用户在访问页面时执行的操作。Event对象代表事件的状态,如发生事件的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。当浏览器探测到一个事件时,如单击鼠标或按钮,它可以触发与这个事件相关联的事件处理函数。事件通常与函数结合使用,函数不会在事件发生前被执行。

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

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

相关文章

深入理解ZooKeeper分布式锁

第1章&#xff1a;引言 分布式系统&#xff0c;简单来说&#xff0c;就是由多台计算机通过网络相连&#xff0c;共同完成任务的系统。想象一下&#xff0c;咱们平时上网浏览网页、看视频&#xff0c;背后其实都是一大堆服务器在协同工作。这些服务器之间需要协调一致&#xff…

小游戏选型(二):第三方社交小游戏厂家对比,即构/声网/融云/云信等

前言&#xff1a; 上一篇文章我们主要介绍社交游戏化趋势&#xff0c;并分析了直播平台面临的买量贵、变现难等问题&#xff0c;探讨了小游戏作为新的运营变现玩法的优势。同时还列举了各大直播平台TOP5的小游戏。今天我们继续介绍小游戏系列内容&#xff0c;本文是该系列的第…

浪花 - 添加队伍业务开发

一、接口设计 1. 请求参数&#xff1a;封装添加队伍参数 TeamAddRequest package com.example.usercenter.model.request;import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.ann…

勤学苦练“prompts“,如沐春风“CodeArts Snap“

前言 CodeArts Snap 上手一段时间了&#xff0c;对编程很有帮助。但是&#xff0c;感觉代码编写的不尽人意。 我因此也感到困惑&#xff0c;想要一份完整的 CodeArts Snap 手册看看。 就在我感觉仿佛"独自彷徨在这条悠长、悠长又寂寥的雨巷"时&#xff0c;我听了大…

【数据库】聊聊explain如何优化sql以及索引最佳实践

在实际的开发中&#xff0c;我们难免会遇到一些SQL优化的场景&#xff0c;虽然之前也看过周阳的课程&#xff0c;但是一直没有进行细心的整理&#xff0c;所以本篇会进行详细列举explain的相关使用&#xff0c;以及常见的索引最佳实践&#xff0c;并通过案例进行讲解。 数据准…

Java复习系列之阶段三:框架原理

1. Spring 1.1 核心功能 1. IOC容器 IOC&#xff0c;全称为控制反转&#xff08;Inversion of Control&#xff09;&#xff0c;是一种软件设计原则&#xff0c;用于减少计算机代码之间的耦合度。控制反转的核心思想是将传统程序中对象的创建和绑定由程序代码直接控制转移到…

阿里云幻兽帕鲁服务器4核16G配置报价

自建幻兽帕鲁服务器租用价格表&#xff0c;2024阿里云推出专属幻兽帕鲁Palworld游戏优惠服务器&#xff0c;配置分为4核16G和4核32G服务器&#xff0c;4核16G配置32.25元/1个月、10M带宽66.30元/1个月、4核32G配置113.24元/1个月&#xff0c;4核32G配置3个月339.72元。ECS云服务…

C++(搜索二叉树)

目录 前言&#xff1a; 1.二叉搜索树 1.1二叉搜索树的定义 1.2二叉搜索树的特点 2.二叉搜索树的实现 2.1框架 2.2查找 2.3插入 2.4删除 1.右子树为空 2.左子树为空 3.左右都不为空 3.递归版本 3.1前序遍历 3.2中序遍历 3.3后续遍历 3.4查找&#xff08;递…

【日常学习笔记】gflags

https://mp.weixin.qq.com/s/FFdAUuQavhD5jCCY9aHBRg gflags定义的是全局变量&#xff0c;在main函数后&#xff0c;添加::gflags::ParseCommandLineFlags函数&#xff0c;就能解析命令行&#xff0c;在命令行传递定义的参数。 在程序中使用DEFINE_XXX函数定义的变量时&#x…

Ubuntu 22.04 apt 安装 ros1 ros Noetic Ninjemys

众所周知 ros2还有很多功能没有移植&#xff0c;而ros1官方不再支持 ubuntu 20.04 之后的版本。另一方面Ubuntu 22.04 更新了很多对新硬件的驱动&#xff0c;有更好的兼容性和体验&#xff0c;这就变的很纠结。 如果想在 22.04 使用最新版本的 ros noetic 只有自己编译一个办法…

HTML 曲线图表特效

下面是代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>基于 ApexCharts 的 HTML5 曲线图表DEMO演示</title><style> body {background: #000524; }#wrapper {padding-top: 20px;background: #000524;b…

第二证券:大金融板块逆势护盘 北向资金尾盘加速净流入

周一&#xff0c;A股商场低开低走&#xff0c;沪指收盘失守2800点。截至收盘&#xff0c;上证综指跌2.68%&#xff0c;报2756.34点&#xff1b;深证成指跌3.5%&#xff0c;报8479.55点&#xff1b;创业板指跌2.83%&#xff0c;报1666.88点。沪深两市合计成交额7941亿元&#xf…

WEB安全渗透测试-pikachuDVWAsqli-labsupload-labsxss-labs靶场搭建(超详细)

目录 phpstudy下载安装 一&#xff0c;pikachu靶场搭建 1.下载pikachu 2.新建一个名为pikachu的数据库 3.pikachu数据库配置 ​编辑 4.创建网站 ​编辑 5.打开网站 6.初始化安装 二&#xff0c;DVWA靶场搭建 1.下载DVWA 2.创建一个名为dvwa的数据库 3.DVWA数据库配…

微信小程序(十八)组件通信(父传子)

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.组件属性变量的定义 2.组件属性变量的默认状态 3.组件属性变量的传递方法 解释一下为什么是父传子&#xff0c;因为组件是页面的一部分&#xff0c;数据是从页面传递到组件的&#xff0c;所以是父传子&#xf…

防火墙的用户认证

目录 1. 认证的区别 2. 用户认证的分类 区别&#xff1a; 3. 上网用户认证的认证方式 3.1 置用户认证的位置&#xff1a; 3.1.1 认证域 创建认证域&#xff1a; 新建一个用户组&#xff1a; 新建一个用户 创建安全组 4. 认证策略 4.1 认证策略方式&#xff1a; 4.2…

MR image smoothing or filtering 既 FWHM与sigma之间的换算关系 fslmaths -s参数

这里写目录标题 FWHM核高斯核中的sigma是有一个换算公式&#xff1a;结果 大量的文献中都使用FWHM 作为单位&#xff0c;描述对MR等数据的平滑&#xff08;smoothing&#xff09;或者滤波&#xff08;filtering&#xff09;过程。FWHM 通常是指full width at half maximum的缩写…

【新书推荐】3.5 char类型

本节必须掌握的知识点&#xff1a; 示例十 代码分析 汇编解析 3.5.1 示例十 char类型是比较古怪的&#xff0c;int\short\long类型如果在使用时不指定signed还是unsigned时都默认是signed&#xff0c;但char不一样&#xff0c;编译器可以实现为带符号的&#xff0c;也可以实现…

Flink实现数据写入MySQL

先准备一个文件里面数据有&#xff1a; a, 1547718199, 1000000 b, 1547718200, 1000000 c, 1547718201, 1000000 d, 1547718202, 1000000 e, 1547718203, 1000000 f, 1547718204, 1000000 g, 1547718205, 1000000 h, 1547718210, 1000000 i, 1547718210, 1000000 j, 154771821…

【QT】文件目录操作

目录 1 文件目录操作相关的类 2 实例概述 2.1 实例功能 2.2 信号发射者信息的获取 3 QCoreApplication类 4 QFile类 5 QFilelnfo类 6 QDir类 7 QTemporaryDir和QTemporaryFiIe 8 QFiIeSystemWatcher类 文件的读写是很多应用程序具有的功能&#xff0c;甚至某些应用程序就是围绕…

内存管理(mmu)/内存分配原理/多级页表

1.为什么要做内存管理&#xff1f; 随着进程对内存需求的扩大&#xff0c;和同时调度的进程增加&#xff0c;内存是比较瓶颈的资源&#xff0c;如何更好的高效的利于存储资源是一个重要问题。 这个内存管理的需求也是慢慢发展而来&#xff0c;早期总线上的master是直接使用物…