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. JavaScript (五) js的基本语法 - - - 面向对象、工程模式、内置对象、JSON

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.编程思想 1.定义: 编程思想:把一些生活中做事的经验融入到程序中 面向过程:凡事都要亲力亲为,每件 ...

  2. Java实现第七届蓝桥杯国赛 赢球票

    标题:赢球票 某机构举办球票大奖赛.获奖选手有机会赢得若干张球票. 主持人拿出 N 张卡片(上面写着 1~N 的数字),打乱顺序,排成一个圆圈. 你可以从任意一张卡片开始顺时针数数: 1,2,3- 如 ...

  3. Java实现第九届蓝桥杯打印大X

    打印大X 题目描述 如下的程序目的是在控制台打印输出大X. 可以控制两个参数:图形的高度,以及笔宽. 用程序中的测试数据输出效果: (如果显示有问题,可以参看p1.png) 高度=15, 笔宽=3 * ...

  4. tensorflow2.0学习笔记第一章第二节

    1.2常用函数 本节目标:掌握在建立和操作神经网络过程中常用的函数 # 常用函数 import tensorflow as tf import numpy as np # 强制Tensor的数据类型转 ...

  5. Java与Swift对比

    本文链接:http://blog.csdn.net/msyqmsyq/article/details/53538159 从Java到Swift还是比较简单的,相比Object-C,Swift和Java ...

  6. 双向链表都不懂，还说懂Redis?

    目录 redis源码分析系列文章 前言 API使用 lpush左侧插入数据 rpush右侧插入数据 删除某个数据 修改某个数据 具体逻辑图 双向链表的定义 节点ListNode 整体架构 双向链表的实 ...

  7. gitee+picgo搭建个人博客图床

    gitee+picgo搭建个人博客图床 准备 首先需要去码云注册一个账号,并新建一个仓库.接着下载PicGO并安装好. 过程 点击左下方的插件设置. image 在搜索框中输入gitee搜索插件,安装 ...

  8. js防抖函数

    一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如 ...

  9. JDK8在泛型类型推导上的变化

    概述 JDK8升级,大部分问题可能在编译期就碰到了,但是有些时候比较蛋疼,编译期没有出现问题,但是在运行期就出了问题,比如今天要说的这个话题,所以大家再升级的时候还是要多测测再上线,当然JDK8给我们 ...

  10. Java规则引擎 Easy Rules

    1.  Easy Rules 概述 Easy Rules是一个Java规则引擎,灵感来自一篇名为<Should I use a Rules Engine?>的文章 规则引擎就是提供一种可选 ...