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. 从0开始探究vue-双向绑定原理

    理解 vue是一个非常优秀的框架,其优秀的双向绑定原理,mvvm模型,组件,路由解析器等,非常的灵活方便,也使开发者能够着重于数据处理,让开发者更清晰的设计自己的业务. 双向绑定,就是数据变化的时候, ...

  2. Java并发编程 (一) 导读

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.并发编程相关技术栈 1.内容主要为高并发的解决思路与手段,具体涉及: ​ 2.涉及的基础知识与核心知 ...

  3. Physic Design：Floorplan算法概览

    仅用于学习交流,转载请联系本人. 1 floorplan是什么 floorplan常被翻译成布图规划,是指在芯片级别上对模块进行布局,也就是哪个单元放在什么地方,但是单元内部的具体布局并不关心.该步骤 ...

  4. Java 第十一届 蓝桥杯 省模拟赛 户户通电（图算法）

    户户通电 题目 问题描述 2015年,全中国实现了户户通电.作为一名电力建设者,小明正在帮助一带一路上的国家通电. 这一次,小明要帮助 n 个村庄通电,其中 1 号村庄正好可以建立一个发电站,所发的电 ...

  5. Java实现 蓝桥杯VIP 算法提高 阮小二买彩票

    算法提高 阮小二买彩票 时间限制:1.0s 内存限制:512.0MB 问题描述 在同学们的帮助下,阮小二是变的越来越懒了,连算账都不愿意自己亲自动手了,每天的工作就是坐在电脑前看自己的银行账户的钱是否 ...

  6. Android studio环境配置（运行报错）

    报错的种类有很多,下面的方法能解决大多数: 所有路径不能用中文,不能有空格,逗号句号也不能用中文,项目文件路径也不行 首先要配置Java环境,这个就不多说了, 这里有以下JAVA_HOME的配置,下图 ...

  7. css3图片防止变形

    1.object-fit 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐. 之前我们大多数用的 大多数都是利用background-size: cover 来避免对图片造 ...

  8. ubuntu12.04 empathy添加qq登陆

    1,

  9. 线程的状态及sleep、wait等方法的区别

    1.创建状态 使用 new 关键字和 Thread 类或其子类建立一个线程对象后,该线程对象就处于新建状态.它保持这个状态直到程序 start() 这个线程. 2.就绪状态 当线程对象调用了start ...

  10. 关于Integer类的值使用==比较

    题记:前几天面试Java基础给来了个面试题Integer a=100,b=100;System.out.println(a==b); 当时回答是true,后来面试官又来了一个Integer a=200 ...