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. 跨域解决方案 - JSONP

    目录 1. 定义 2. JSONP 解决跨域 3. 应用场景 4. 代码演示 1. 定义 在HTML 中, script 标签有两个个性质: script 标签可以不受同源策略的限制去访问服务器资源, ...

  2. Spring Boot入门系列（十四）使用JdbcTemplate操作数据库，配置多数据源！

    前面介绍了Spring Boot 中的整合Mybatis并实现增删改查.如何实现事物控制.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/c ...

  3. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（二）

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  4. Java实现 蓝桥杯VIP 算法训练 数位分离

    ** 算法训练 数位分离** 问题描述 编写一个程序,输入一个1000 以内的正整数,然后把这个整数的每一位数字都分离出来,并逐一地显示. 输入格式:输入只有一行,即一个1000以内的正整数. 输出格 ...

  5. Java实现蓝桥杯模拟正整数序列的数量

    问题描述 小明想知道,满足以下条件的正整数序列的数量: 1. 第一项为 n: 2. 第二项不超过 n: 3. 从第三项开始,每一项小于前两项的差的绝对值. 请计算,对于给定的 n,有多少种满足条件的序 ...

  6. Java 虚拟机是如何判定两个 Java 类是相同的？

    Java 虚拟机是如何判定两个 Java 类是相同的? 答:Java 虚拟机不仅要看类的全名是否相同,还要看加载此类的类加载器是否一样.只有两者都相同的情况,才认为两个类是相同的.即便是同样的字节代码 ...

  7. java实现猜生日

    ** 猜生日** 今年的植树节(2012年3月12日),小明和他的叔叔还有小伙伴们一起去植树.休息的时候,小明的同学问他叔叔多大年纪,他叔叔说:"我说个题目,看你们谁先猜出来!" ...

  8. Linux网络命令详解

    命令write,功能是给指定用户发信息(接收信息的用户要处于登录状态,相当于QQ的私聊),例如:用户xbb给用户liuyifei发消息:I want to eat together!(发送消息以CRT ...

  9. 自动把网页px单位转换成rem

    自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果

  10. docker安装nacos

    nacos 最近尝试着将项目由springcloud + netflix重构为springcloud alibaba,需要安装一些组件,感觉安装太麻烦,版便尝试着使用docker来部署,发现挺方便,记 ...