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. ASP.NET关于书籍详情和删除的Demo（HttpHandler进行页面静态化[自动生成html网页]+Entity Framework通过类创建数据库+EF删查）

    这次的Demo如标题所示, 首先第一步EF创建数据库 创建两个类,一个是图书类,一个是图书类别的类 using System; using System.Collections.Generic; us ...

  2. Java实现 LeetCode 779 第K个语法符号（递归）

    779. 第K个语法符号 在第一行我们写上一个 0.接下来的每一行,将前一行中的0替换为01,1替换为10. 给定行数 N 和序数 K,返回第 N 行中第 K个字符.(K从1开始) 例子: 输入: N ...

  3. ASP.NET防止自己网站的资源被盗（通过IHttpHandler 带样例说明）

    我这里用的图片被盗举例子 一个正常的网页 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind ...

  4. Java实现 LeetCode 376 摆动序列

    376. 摆动序列 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为摆动序列.第一个差(如果存在的话)可能是正数或负数.少于两个元素的序列也是摆动序列. 例如, [1,7,4,9,2,5 ...

  5. Java实现 LeetCode 136 只出现一次的数字

    136. 只出现一次的数字 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现 ...

  6. java实现欧拉与鸡蛋

    ** 欧拉与鸡蛋** 大数学家欧拉在集市上遇到了本村的两个农妇,每人跨着个空篮子.她们和欧拉打招呼说两人刚刚卖完了所有的鸡蛋. 欧拉随便问:"卖了多少鸡蛋呢?" 不料一个说:&qu ...

  7. Java基础（十）

    一.XML概述 属性文件是用来描述程序配置,属性文件包含了一组名/值对.属性文件采用的是一种单一的平面层次结构,同时属性文件要求键是唯一的. XML格式能够表达层次结构,并且重复的元素不会被曲解. H ...

  8. Python数据分析软件包介绍

    Python数据分析主要软件包: 1.python -m pip install numpy 2.python -m pip install pandas 3.python -m pip instal ...

  9. SpringCloud多数据源实现

    1.枚举多数据源-定义一一对应变量 /** * * 列出所有的数据源key(常用数据库名称来命名) * 注意: * 1)这里数据源与数据库是一对一的 * 2)DatabaseType中的变量名称就是数 ...

  10. 拉勾网 + selenium

    目录 方式一 selenium 方式二普通方法 方式一 selenium from selenium import webdriver import time from selenium.webdri ...