关于JS中常用事件绑定

最新推荐文章于 2023-02-16 12:48:12 发布

凹凸曼牵手小怪兽

最新推荐文章于 2023-02-16 12:48:12 发布

阅读量226

点赞数

分类专栏： H5学习前端学习文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_42990369/article/details/103753435

版权

前端学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

H5学习

6 篇文章 0 订阅

订阅专栏

Js中的Onload事件绑定以及含义

标注：

1. 浏览器加载页面的顺序：从上到下；
2. onload事件的应用场景：整个html页面加载完成之后，在执行js的操作（因为js操作中可能提前使用到html页面的标签）；
3. onload事件最常用写法：window.onload = function(){//方法体} ；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
  	//body加载完成后执行
    window.onload = function(){
    	 //1.动态获取按钮并将按钮绑定事件
	    document.getElementById("btn").onclick = function(){
	          alert("Hello World");
	    }
    }
  </script>
</head>
<body >
    <button id="btn" >我是按钮，请点击我</button>
</div>
</body>
</html>

Js中的Onblur事件绑定以及含义

结合Onload事件一同进行设计

标注：

1. onblur事件是一个监听鼠标光标离开的事件；
2.。鼠标光标移开用户名输入框之后，检查用户名是否输入；

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				//【需求一】：校验用户名:
				//鼠标光标移开用户名输入框之后，检查用户名是否输入；
				//1.获取用户名输入框
				var userName = document.getElementById("userName");
				//2.给输入框绑定onblur事件
				userName.onblur = function() {
					//3.校验用户输入的用户名是否为空
					var val = userName.value;
					if(val == "") {
						alert("请输入用户名........");
					}
				}
			}
		</script>
	</head>

	<body>
		<form action="" method="get">
	用户名：<input type="text" name="userName" id="userName" /><br /> 
    商品单价：<input type="submit" value="提交订单" />
		</form>
	</body>
</html>

Js中的Onchange事件绑定以及含义

onchange事件用于监听表单中输入的内容有没有改变，如有改变则onchange事件被触发；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				//【需求】根据商品件数动态计算商品总价
				//1.获取商品的件数标签
				var numInput = document.getElementById("num");
				numInput.onchange = function() {
					//2.商品件数
					var num = numInput.value;
					//3.计算总价，并将总价赋值到商品总价输入框
					//总价 = 单价 * 数量；
					var price = document.getElementById("proPrice").value;
					var totalPrice = price * num;
					//4.将总价赋值到商品总价输入框
					document.getElementById("totalPrice").value = totalPrice;
				}
			}
		</script>
	</head>

	<body>
		<form action="" method="get">
			<input value="10" id="proPrice" /> *商品件数：
			<input type="text" id="num" /> =商品总价：
			<input type="text" id="totalPrice" /><br />
			<input type="submit" value="提交订单" />
		</form>
	</body>
</html>

在这里插入图片描述
当总价发生变化，页面会提示

关于Onsubmit事件作用

监听用户提交表单的操作

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		function checkForm(){
			//alert("表单被提交了......");
            //定义一个校验表单是否通过的标记
            var checkFormFlag = true;
			//校验用户名
			var userName = document.getElementById("username").value;
			if(userName == ""){
				alert("用户名不能为空......");
				checkFormFlag = false;
			}
			//校验密码
			var pwd = document.getElementById("password");
				if(pwd == ""){
				alert("密码不能为空......");
				checkFormFlag = false;
			}
			return checkFormFlag;
		}
	</script>
	<body>
		<form action="#" method="get" onsubmit="return checkForm();" >
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="40%"><input type="text" name="username" id="username"></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

对表单中的用户名和密码进行非空校验，校验不通过阻止表单提交；

凹凸曼牵手小怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于JS中常用事件绑定

Js中的Onload事件绑定以及含义标注：1. 浏览器加载页面的顺序：从上到下；2. onload事件的应用场景：整个html页面加载完成之后，在执行js的操作（因为js操作中可能提前使用到html页面的标签）；3. onload事件最常用写法：window.onload = function(){//方法体} ；<!DOCTYPE html><html lang="...
复制链接

扫一扫

专栏目录