响应式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.hqwc.cn/news/433168.html

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

相关文章

写静态页面——魅族声学_前端页面练习

1、效果: 1、html代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>魅族声学</titl…

小红书如何做混部?

作者&#xff1a;宋泽辉&#xff08;小红书&#xff09;、张佐玮&#xff08;阿里云&#xff09; 编者按&#xff1a; Koordinator 是一个开源项目&#xff0c;是基于阿里巴巴内部多年容器调度、混部实践经验孵化诞生&#xff0c;是行业首个生产可用、面向大规模场景的开源混…

大数据数据流分析和处理的工具pig,从入门到精通!

介绍&#xff1a;Pig是一种数据流语言和运行环境&#xff0c;用于处理和分析大数据。 Pig由两个主要部分构成&#xff1a; Pig Latin语言&#xff1a;这是一种用于描述数据流的高级语言&#xff0c;它允许用户以较为简洁的方式编写数据处理和转换任务。 Pig执行环境&#xff1a…

electron-builder vue 打包后element-ui字体图标不显示问题

当使用electron打包完成的时候&#xff0c;启动项目发现使用的element-ui字体图标没显示都变成了小方块&#xff0c;并出现报错&#xff0c;请看下图&#xff1a; 解决方法&#xff1a; 在vue.config.js中设置 customFileProtocol字段&#xff1a;pluginOptions: {electronBui…

element-ui 树形控件 实现点击某个节点获取本身节点和底下所有的子节点数据

1、需求&#xff1a;点击树形控件中的某个节点&#xff0c;需要拿到它本身和底下所有的子节点的id 1、树形控件代码 <el-tree:data"deptOptions"node-click"getVisitCheckedNodes"ref"target_tree_Speech"node-key"id":default-ex…

WSL2+ubuntu 18+VsCode 配置C/C++开发环境 踩坑

1. 管理员模式打开cmd&#xff0c;或PowerShell &#xff0c;输入 wsl --install 可能出现的错误&#xff1a;无法解析服务器名称或地址 解决方式&#xff1a;科学上网 安装WSL时遇到“无法解析服务器名称或地址”的错误及解决方法 - 知乎 错误2&#xff1a;Error 0x8037…

防火墙组网实验

拓扑 配置IP地址、VLAN AR2&#xff1a;[Huawei]sys ISP [ISP]int LoopBack 0 [ISP-LoopBack0]ip address 1.1.1.1 24 [ISP-LoopBack0]int g0/0/0 [ISP-GigabitEthernet0/0/0]ip address 12.0.0.2 24 [ISP-GigabitEthernet0/0/0]int g0/0/2 [ISP-GigabitEthernet0/0/2]ip addr…

ES文档索引、查询、分片、文档评分和分析器技术原理

技术原理 索引文档 索引文档分为单个文档和多个文档。 单个文档 新建单个文档所需要的步骤顺序&#xff1a; 客户端向 Node 1 发送新建、索引或者删除请求。节点使用文档的 _id 确定文档属于分片 0 。请求会被转发到 Node 3&#xff0c;因为分片 0 的主分片目前被分配在 …

实现负载均衡

1.安装依赖 sudo apt insta11 libgd-dev 2.下载nginx wget http://nginx.org/download/nginx-1.22.1.tar.gz 3.解压nginx tar -zvxf nginx-1.22.1.tar.g2 4.编译安装 cd nginx-1.22.1 5.编译并指定安装位置&#xff0c;执行安装之后会创建指定文件夹/www/env/nginx ./configure…

STM32连接阿里云物联网平台

文章目录 引言一、STM32连接阿里云物联网平台思路二、ESP8266烧录固件三、使用AT指令连接阿里云物联网平台四、STM32环形串口缓冲区驱动程序五、STM32连接阿里云驱动程序 引言 连续写了两篇关于阿里云连接的文章&#xff0c;都是使用Arduino ESP8266 & Arduino ESP32的方式…

mysql 存储过程学习

存储过程介绍 1.1 SQL指令执行过程 从SQL执行的流程中我们分析存在的问题: 1.如果我们需要重复多次执行相同的SQL&#xff0c;SQL执行都需要通过连接传递到MySQL&#xff0c;并且需要经过编译和执行的步骤; 2.如果我们需要执行多个SQL指令&#xff0c;并且第二个SQL指令需要…

【干货】【常用电子元器件介绍】【电阻】(二)--敏感电阻器

声明&#xff1a;本人水平有限&#xff0c;博客可能存在部分错误的地方&#xff0c;请广大读者谅解并向本人反馈错误。   电子电路中除了采用普通电阻器外&#xff0c;还有一些敏感电阻器&#xff08;如热敏电阻器、压敏电阻器、光敏电阻器等&#xff09;也被广泛地应用。然而…