响应式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…

【golang】slice赋值null slice不使用零值 | go slice append 头插 尾插

一、slice 传 null 1、如何禁止零值 众所周知go如果初始化都会自带零值效果 比如一个切片我们在传送过程中&#xff0c;如果被占位且不想传值为零值 我们就需要使用* 1.1、定义一个带零值的slice 定义如下&#xff1a; slice make([]float64, 5)这样会输出&#xff1a; [0,…

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

前言&#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;用于减少计算机代码之间的耦合度。控制反转的核心思想是将传统程序中对象的创建和绑定由程序代码直接控制转移到…

clickhouse数据迁移到starrocks踩坑记录

- clickhouse数据迁移到starrocks - 新建 clickhouse外部表 方式- 经测试存在bigint转换问题 官方已于23年 9.8日修复 等待下个版本(官方10天左右发布一个版本)- https://docs.starrocks.io/en-us/latest/data_source/External_table#create-and-manage-jdbc-resources- bug: …

阿里云幻兽帕鲁服务器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云服务…

【fabric.js】toDataURL 性能问题、优化

必要解释&#xff1a;最好看完。。省流版的话&#xff0c;toDataURL 的 multiplier参数不要设置超过500&#xff1b; 情景&#xff1a;在做某些功能的时候涉及到图形的预览&#xff0c;预览的时候是导出为40*40 像素的图片&#xff0c;当碰到某些图形非常小的时候&#xff0c;…

JavaScript与Object C的区别

1.JavaScript 拥有动态类型。JavaScript的变量类型可以随意切换 若你给他赋值为数字&#xff0c;再次给它一个字符串&#xff0c;它以最后一次的类型为准是字符类型。而Object C要严格的多&#xff0c;这样它会报错的 length 6 length ddd var x 5 6;var y x * 10; // do…

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…

编程笔记 html5cssjs 060 css响应式布局

编程笔记 html5&css&js 060 css响应式布局 一、响应式布局二、Bootstrap简介总结 CSS响应式布局是一种可以在不同设备&#xff08;例如桌面电脑、平板电脑、手机等&#xff09;上自动调整页面布局和样式的技术。 一、响应式布局 使用CSS响应式布局的关键是媒体查询&am…

Redis面试题33

当然&#xff0c;请继续提问。 什么是物联网&#xff1f;它的应用场景有哪些&#xff1f; 答&#xff1a;物联网&#xff08;Internet of Things&#xff0c;IoT&#xff09;是指通过互联网将各种物理设备、传感器和其他对象连接到一起&#xff0c;使它们能够相互交流和共享数…

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

周一&#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数据库配…

EasyExcel中自定义拦截器的运用

在EasyExcel中自定义拦截器不仅可以帮助我们不止步于数据的填充&#xff0c;而且可以对样式、单元格合并等带来便捷的功能。下面直接开始 我们定义一个MergeWriteHandler的类继承AbstractMergeStrategy实现CellWriteHandler public class MergeLastWriteHandler extends Abst…