解释HTML中事件和事件处理,javascript事件是什么?-程序员宅基地

技术标签: 解释HTML中事件和事件处理  

事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

f99a04bb0993eca54f80eee1842ecb97.png

JavaScript程序采用了异步事件驱动编程(Event-driven programming)模型,维基百科对它的解释是:

事件驱动程序设计(Event-driven programming)是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作(如鼠标的按键,键盘的按键动作)或者是由其他程序的消息来决定的。

相对于批处理程序设计(batch programming)而言,程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而,事件驱动程序设计这种设计模型是在交互程序(Interactive program)的情况下孕育而生的。

由于用户的行为是不确定的。这种场景是传统的同步编程模型没法解决的,因为你不可能等用户操作完了才执行后面的代码。所以在javascript中使用了异步事件,也就是说:js中的事件都是异步执行的。

事件驱动程序模型基本的实现原理基本上都是使用 事件循环(Event Loop),这部分内容涉及浏览器事件模型、回调原理。

JavaScript DOM、BOM模型中,同样异步的还有setTimeout,XMLHTTPRequest这类API并不是JavaScript语言本身就有的。

事件分类:

onload 和 onUnload事件

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。

onFocus, onBlur 和 onChange事件

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容,checkEmail() 函数就会被调用。

onSubmit事件

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true,则提交表单,反之取消提交。

onMouseOver 和 onMouseOut事件

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时,就会弹出一个警告框:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30878135/article/details/117868443

智能推荐

eeprom_AT24C256_I2C驱动_at24c256驱动代码-程序员宅基地

文章浏览阅读637次。AT24C256 是256Kbit大小的eeprom,掉电仍可保留数据。本驱动实现了通过I2C总线对AT24C256的读写操作。#include #include #include #include MODULE_LICENSE("Dual BSD/GPL");#include "sti7105.h"#include "stsys.h"#include "stddefs.h"_at24c256驱动代码

ffmpeg编解码原理-程序员宅基地

文章浏览阅读891次。https://www.cnblogs.com/zxqstrong/p/4555517.html

安装好pytorch和cuda后运行程序报错:OSError: [WinError 127] 找不到指定的程序_error loading "d:\software\anaconda\lib\site-packa-程序员宅基地

文章浏览阅读1.3w次,点赞4次,收藏24次。1 安装报错从装好pytorch和cuda后运行程序报错:OSError: [WinError 127] 找不到指定的程序。 Error loading "D:\soft\anaconda\envs\pytorch\Lib\site-packages\torch\libcaffe2_detectron_ops.dll’ ,or one of its dependencies这是因为安装的pytorch版本和cuda版本不匹配。卸载后在官网重新下载相匹配的对应的版本,安装就可以了。官网:pytorch_error loading "d:\software\anaconda\lib\site-packages\torch\lib\torch_python

btstack编译与运行_btstack下载-程序员宅基地

文章浏览阅读1.7k次,点赞3次,收藏8次。记录一下编译和运行开源蓝牙协议栈的过程。btstack蓝牙协议栈的GitHub网址:https://github.com/bluekitchen/btstack_btstack下载

渗透攻防需要实践资料统计-程序员宅基地

文章浏览阅读922次。渗透攻防书籍16本,网络资料39项,这些通用的渗透攻防基础材料足够支撑你的日常工作了,建议收藏。

使用prepareStatement来实现对数据库的插入操作_preperstatment 如何插入oracle date字段-程序员宅基地

文章浏览阅读1.8k次。1、使用prepareStatement2、数据库的字段中有String和Date类型3、使用Properties来读取文件中的key-value4、占位符?的使用代码:package test_video_kang.test01;import org.junit.Test;import java.io.IOException;import java.io.InputStream;import java.sql.Connection;import java.sql.DriverMan_preperstatment 如何插入oracle date字段

随便推点

RecyclerView itme 点击事件和长按事件,onItemLongClick,onItemClick_recyclerview.onitemtouchlistener 分别click和longpress-程序员宅基地

文章浏览阅读1.2k次。众所周知 RecyclerView 比listview 要强大很多,现在多数android开发人员都使用RecyclerView 代替listview 。但在刚开始使用过程相信大家都遇到这个问题 ,就是RecyclerView 没有自带点击事件(onItemClick)和长按事件(onItemLongClick),在这里把自己的写法分享出来,希望对部分刚接触的开发者有帮助。第一种方式:..._recyclerview.onitemtouchlistener 分别click和longpress

tomcat导入java代码_Eclipse导入Tomcat8源代码并编译安全补丁文件-程序员宅基地

文章浏览阅读143次。1:到官网下载Tomcat源码,我这里Tomcat版本是8.0.29;下载地址:http://archive.apache.org/dist/tomcat/tomcat-8/,下载对应版本后解压2:Eclipse新建Dynamic Web Project项目Tomcat8.0.29;然后File-Import-File System,选择解压后的目录导入后项目会报错;因为缺少jar3:在项目下 ..._eclipse怎么导入apache源码 提示缺少cookiefilter

计算机网络_please use netacad.cn to access the cisco networki-程序员宅基地

文章浏览阅读5k次。意思是再用官网的号登录链接一下,我一点就进去了,没截屏到。铜直通线 ,连接三个主机,设置三个主机ip地址,要用到网络层;对这个软件熟悉了下 操作,设置主机,集线器,还有调试,运行;然后从左上角的机子发送数据包到 左下角的机子。打勾,第二个 快速启动占运存自己考虑。用cisco的课程和软件去搭建网络。然后学习计算机网络课本和王道。学习计算机网络协议实验。首先注册账号和选择课程。_please use netacad.cn to access the cisco networking academy program

什么是SSL卸载?如何实现SSL卸载?有什么好处?_ssl卸载和ssl加速-程序员宅基地

文章浏览阅读5.5k次,点赞3次,收藏16次。下面将讨论一个经常出现的问题,用快速通俗的语言来探讨一下什么是SSL卸载,如何进行SSL卸载以及为什么要进行SSL卸载。什么是SSL卸载,它是如何工作的?通俗地说,在TLS 1.3之前,甚至在TLS 1.2之前,SSL/TLS经常会增加连接的延迟性。这就是SSL/TLS减慢网站速度的原因。十年前,SSL/TLS的这一缺点总是令人倍感震惊。“哦,它们会拖慢你的网站的速度”。当时这的确是真的。今天情况不再是这样了,但在过去,人们会SSL/TLS认为有点资源匮乏。首先,你会进行SSL/TLS握手。在T_ssl卸载和ssl加速

oracle 需要分析oracle性能,可依赖于图形化界面Oracle Enterprise Manager_企业中用oracle是用图形化界面吗》-程序员宅基地

文章浏览阅读6.4w次。1、卸载 EM Database Control emca -deconfig dbcontrol db -repos drop2、创建和配置EM Database Control emca -config dbcontrol db -repos create3、em的开启与关闭停止em控制台服务emctl stop dbconsole开启em控制台服务emctl start dbconsole4.问题Oracle无法访问em console解决办法(1).em服务没启_企业中用oracle是用图形化界面吗》

行列有序的二维数组查找_二维行列有序-程序员宅基地

文章浏览阅读1.4k次,点赞3次,收藏2次。题目在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。 输入描述:array: 待查找的二维数组target:查找的数字输出描述:查找到返回true,查找不到返回false分析与解法解法一、分治法这种_二维行列有序

推荐文章

热门文章

相关标签