js事件入门（4）
4.表单事件
表单事件处理主要用来验证表单，可以处理用户在表单上所做的任何操作。
4.1.onsubmit事件
当用户点击submit按钮来提交表单时，就会触发onsubmit事件，如果事件处理程序返回一个false，就会阻止表单提交，表单就不会发送数据到服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oForm = document.getElementsByTagName("form")[0];
//表单提交到时候，弹出一个1，然后返回false阻止表单提交
oForm.onsubmit = function(){
alert(1);
//如果最后返回的是true 表单会提交到服务器
return false;
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="submit" value="提交"/>
</form>
</body>
</html>
4.2.onchange
修改表单字段的时候触发该事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('chk');
//选中或者去掉选中状态的时候触发
oInput.onchange = function(){
alert(1);
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="checkbox" name="" id="chk" value="" />
</form>
</body>
</html>
4.3.onfocus 获取焦点事件
当获取到焦点到时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('txt');
//获取焦点的时候，将文本框的内容清空
oInput.onfocus= function(){
oInput.value = "";
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="text" name="" id="txt" value="请输入用户名" />
</form>
</body>
</html>
4.4.onblur失去焦点事件
当失去焦点的时候触发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('txt');
//失去焦点的时候给文本框加默认值
oInput.onblur= function(){
oInput.value = "请输入用户名";
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="text" name="" id="txt" value="" />
</form>
</body>
</html>
螺钉课堂视频课程地址：http://edu.nodeing.com
js事件入门（4）的更多相关文章
- js事件入门（2）
2.鼠标事件 鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件. 2.1.onmousedown 鼠标按下的时候触发的事件 <!DOCTYPE html> <h ...
- js事件入门（6）
7.事件冒泡机制 7.1.什么是事件冒泡 当一个元素接收到一个事件以后,会将事件传播给它的父级元素,它的负级元素会一层一层往上传播,直到最顶层window,这种事件传播机制叫作事件冒泡. <!D ...
- js事件入门（5）
5.窗口事件 5.1.onload事件 元素加载完成时触发,常用的就是window.onload window.onload = function(){ //等页面加载完成时执行这里的代码 } 5.1 ...
- js事件入门（3）
3.键盘事件 3.1.onkeydown 键盘按下事件 当键盘按下的时候触发 <!DOCTYPE html> <html> <head> <meta char ...
- js事件入门（1）
1.事件相关概念 1.1 什么是事件? 事件是用户在访问页面时执行的操作,也就是用户访问页面时的行为.当浏览器探测到一个事件时,比如鼠标点击或者按键.它可以触发与这个事件相关的JavaScript对象 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- 第一百一十九节，JavaScript事件入门
JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
- Node.js开发入门—HelloWorld再分析
在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- Spring 内部方法调用失效问题（AOP）
AOP使用的是动态代理的机制,它会给类生成一个代理类,事务的相关操作都在代理类上完成.内部方式使用this调用方式时,使用的是实例调用,并没有通过代理类调用方法,所以会导致事务失效. 解决办法 方式一 ...
- java方法句柄-----2.方法句柄的获取、变换、特殊方法句柄
目录 1.获取方法句柄 1.1查找构造方法.一般方法和静态方法的方法句柄 1.2 查找类中的特殊方法(类中的私有方法) 1.3 查找类中静态域和一般域 1.4 通过反射API得到的Constructo ...
- Spring （ 二 ） IOC 依赖注入
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 1.什么是IOC IOC 全称指的是 Inverse Of Control 控制反转. 原来我们使用Sp ...
- Java实现 LeetCode 335 路径交叉
335. 路径交叉 给定一个含有 n 个正数的数组 x.从点 (0,0) 开始,先向北移动 x[0] 米,然后向西移动 x[1] 米,向南移动 x[2] 米,向东移动 x[3] 米,持续移动.也就是说 ...
- Java实现 蓝桥杯VIP 算法训练 调和数列
问题描述 输入一个实数x,求最小的n使得,1/2+1/3+1/4+-+1/(n+1)>=x. 输入的实数x保证大于等于0.01,小于等于5.20,并且恰好有两位小数.你的程序要能够处理多组数据, ...
- Java实现 LeetCode 306 累加数
306. 累加数 累加数是一个字符串,组成它的数字可以形成累加序列. 一个有效的累加序列必须至少包含 3 个数.除了最开始的两个数以外,字符串中的其他数都等于它之前两个数相加的和. 给定一个只包含数字 ...
- Java实现字符串匹配
1 问题描述 给定一个n个字符组成的串(称为文本),一个m(m <= n)的串(称为模式),从文本中寻找匹配模式的子串. 2 解决方案 2.1 蛮力法 package com.liuzhen.c ...
- 官宣！ASF官方正式宣布Apache Hudi成为顶级项目
马萨诸塞州韦克菲尔德(Wakefield,MA)- 2020年6月 - Apache软件基金会(ASF).350多个开源项目和全职开发人员.管理人员和孵化器宣布:Apache Hudi正式成为Apac ...
- Okapi BM25算法
引言 Okapi BM25,一般简称 BM25 算法,在 20 世纪 70 年代到 80 年代,由英国一批信息检索领域的计算机科学家发明.这里的 BM 是"最佳匹配"(Best M ...
- golang连接达梦数据库的一个坑
golang连接达梦数据库的一个坑 有一次项目中用到了达梦数据库,后端语言使用的golang,达梦官方并未适配专门的golang连接方式,正一筹莫展的时候发现达梦提供了odbc的连接,这样可以使用类似 ...