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）的更多相关文章

  1. js事件入门（2）

    2.鼠标事件 鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件. 2.1.onmousedown 鼠标按下的时候触发的事件 <!DOCTYPE html> <h ...

  2. js事件入门（6）

    7.事件冒泡机制 7.1.什么是事件冒泡 当一个元素接收到一个事件以后,会将事件传播给它的父级元素,它的负级元素会一层一层往上传播,直到最顶层window,这种事件传播机制叫作事件冒泡. <!D ...

  3. js事件入门（5）

    5.窗口事件 5.1.onload事件 元素加载完成时触发,常用的就是window.onload window.onload = function(){ //等页面加载完成时执行这里的代码 } 5.1 ...

  4. js事件入门（3）

    3.键盘事件 3.1.onkeydown 键盘按下事件 当键盘按下的时候触发 <!DOCTYPE html> <html> <head> <meta char ...

  5. js事件入门（1）

    1.事件相关概念 1.1 什么是事件? 事件是用户在访问页面时执行的操作,也就是用户访问页面时的行为.当浏览器探测到一个事件时,比如鼠标点击或者按键.它可以触发与这个事件相关的JavaScript对象 ...

  6. Node.js快速入门

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...

  7. 第一百一十九节，JavaScript事件入门

    JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...

  8. Node.js开发入门—HelloWorld再分析

    在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...

  9. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

随机推荐

  1. Rocket - diplomacy - BaseNode

    https://mp.weixin.qq.com/s/eOgNLi_MJ8HJOpepGaaW8Q   简单介绍BaseNode的实现.   ​​   1. You cannot create a n ...

  2. Java实现 LeetCode 698 划分为k个相等的子集(递归)

    698. 划分为k个相等的子集 给定一个整数数组 nums 和一个正整数 k,找出是否有可能把这个数组分成 k 个非空子集,其总和都相等. 示例 1: 输入: nums = [4, 3, 2, 3, ...

  3. Java实现蓝桥杯 算法训练 Professor Monotonic's Network

    试题 算法训练 Professor Monotonic's Network 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 无聊的教授最近在做一项关于比较网络的实验.一个比较网络由若 ...

  4. Java实现 蓝桥杯VIP 算法提高 传染病控制

    算法提高 传染病控制 时间限制:1.0s 内存限制:512.0MB 问题描述 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的 ...

  5. Java实现 蓝桥杯 历届试题 连号区间数

    问题描述 小明这些天一直在思考这样一个奇怪而有趣的问题: 在1~N的某个全排列中有多少个连号区间呢?这里所说的连号区间的定义是: 如果区间[L, R] 里的所有元素(即此排列的第L个到第R个元素)递增 ...

  6. 【Jquery】判断宽度跳转

    $(window).resize(function(){ var wWidth = screen.width; if( wWidth < 788 ){ window.location.href= ...

  7. 【Mysql】使用一条sql查询出库表结构信息

    1.新建查询 将以下脚本粘贴进去 脚本如下: SELECT TABLE_SCHEMA 库名, TABLE_NAME 表名, COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA ...

  8. Jenkins job docker 没有权限

    问题描述 基于docker使用jenkins 构建cicd,在执行docker build 的时候出现了权限的问题.具体报错如下 + REPOSITORY=10.0.0.100/library/wen ...

  9. 来看看阿里架构师Java 代码打日志姿势！你也是这样写的吗

    使用slf4j 使用门面模式的日志框架,有利于维护和各个类的日志处理方式统一. 实现方式统一使用: Logback框架 打日志的正确方式 什么时候应该打日志 当你遇到问题的时候,只能通过debug功能 ...

  10. c常用函数-sprintf

    sprintf sprinti函数的作用是把一个字符串格式化后输入到另一个字符串中,然后返回写入的·字符数量. Sprinf在用法上和1.2.3节的prinf函数一致,区别是sprintf输出结果到指 ...