前端页面JS事务学习Day02

也້໌ᮨ

已于 2022-11-05 14:18:19 修改

阅读量524

点赞数 1

文章标签： html javascript

于 2022-11-04 08:44:32 首次发布

本文链接：https://blog.csdn.net/qq_52992141/article/details/127681950

版权

本文深入探讨了前端JavaScript中的事务处理，涵盖了BOM（浏览器对象模型）、History与Location对象的使用，以及DOM操作和表单处理。通过对这些核心概念的学习，有助于提升前端开发中的页面交互能力。

摘要由CSDN通过智能技术生成

https://www.yuque.com/docs/share/4c08533f-6065-4af6-afe3-36efc0721791?# 《前端》

四、JS事务

4.1、事务

4.2、BOM

4.3、History与Loaction对象

4.4、DOM

4.5、表单

四、JS事务

4.1、事务

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>001事务</title>
	</head>
	<!--
		load加载事件：
			当页面加载完毕后执行的事件
			
		常用事件：
			onload：当页面或图像加载完后立即触发
			onblur：元素失去焦点
			onfocus：元素获得焦点
			onclick：鼠标点击某个对象
			onchange：用户改变域的内容
			onmouseover：鼠标移动到某个元素上
			onmouseout：鼠标从某个元素上离开
			onkeyup：某个键盘的键被松开
			onkeydown：某个键盘的键被按下
		事件流：
			接收事件的顺序
		事件流的顺序：事件冒泡和事件捕获
		事件冒泡（从小到大）
			事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）
		事件捕获（从大到小）
			事件开始时由document对象接受，然后逐级向下传播到具体的节点
	 
	 -->
	<body>
		<div id="div1">
			这是一个div
			<label for="uname"></label><input type="text" name="name" id="uname" value="请输入姓名" />
			<button type="button" οnclick="clickBtn()">提交按钮</button>
		</div>
		<div id="div2">
			这是一个div
			城市：<select name="city" id="city">
				<option value="">请选择城市</option>
				<option>上海</option>
				<option>北京</option>
			</select>
		</div>
	</body>
	<!--
		 事件处理程序
			响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头
			1. HTML事件处理程序
			2. DOM 0级事件处理程序
				将一个函数赋值给一个事件处理程序属性
				只能为同一个元素的同一个事件设定一个事件程序（覆盖）
			3. DOM 2级事件处理程序
				addEventListener()  和  removeEventListener()
				有三个参数：
					参数1：事件名
					参数2：处理事件的函数
					参数3：事件冒泡（false）或捕获（true）
				可以为同一个元素的同一个事件设定多个事件程序
				
			
		document.getElementById("id属性值"); 通过id属性值获取元素对象
	 
	 -->
	 
	 
	
	<script type="text/javascript">
		function test(){
			console.log('鼠标移开了...');
		}
		
		/**
		 * 加载事件
		 * 	当页面上的标签和引入的资源加载完毕后，才会执行的方法
		 */
		window.onload = function(){
			// 通过id属性值获取按钮对象
			var btn = document.getElementById("btn");
			console.log(btn);
			// 给指定元素绑定点击事件
			btn.onclick = function(){
				console.log("DOM 0级事件处理程序...");
			}
			btn.onclick = function(){
				console.log("test...");
			}
		}
			
			// DOM 2级事件
			var btn2 = document.getElementById("btn2");
			// 给按钮绑定事件监听
			btn2.addEventListener('click',function(){
				console.log("DOM 2级事件...");
			});
			btn2.addEventListener('click',fn);
			function fn(){
				console.log("按钮被点击了...");
			}
			// 移除事件
			btn2.removeEventListener("click",fn);
			
	</script>
	
	<!--
	 	常用事件：
	 		onload：当页面或图像加载完后立即触发
	 		onblur：元素失去焦点
	 		onfocus：元素获得焦点
	 		onclick：鼠标点击某个对象
	 		onchange：用户改变域的内容
	 		onmouseover：鼠标移动到某个元素上
	 		onmouseout：鼠标从某个元素上离开
	 		onkeyup：某个键盘的键被松开
	 		onkeydown：某个键盘的键被按下
	  -->
	<script type="text/javascript">
		window.onload = function() {
			console.log("页面加载完成...");
		}
		var div1 = document.getElementById("div1");
		div1.onblur = function() {
			console.log("块1失去焦点");
		}
		div1.onfocus = function() {
			console.log("块1获得焦点");
		}
		div1.onmouseover = function() {
			console.log("鼠标悬停");
		}
		div1.onmouseout = function() {
			console.log("鼠标移开");
		}
		var uname = document.getElementById("uname");
		uname.onblur = function() {
			console.log("文本框失去焦点");
		}
		uname.onfocus = function() {
			console.log("文本框获得焦点");
		}
		uname.onkeydown = function() {
			console.log("键盘按下");
		}
		uname.onkeyup = function() {
			console.log("键盘弹起");
		}
	
		function clickBtn() {
			console.log("按钮被点击了");
		}
		document.getElementById("city").onchange = function() {
			console.log("选中城市改变了...");
		}
	</script>
</html>

4.2、BOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>002BOM</title>
	</head>
	<body>
		<h2>系统对话框</h2>
		<button type="button" οnclick="testAlert()">消息框</button>
		<button type="button" οnclick="testPrompt()">输入框</button>
		<button type="button" οnclick="testConfirm()">确认框</button>


		<hr>
		<button type="button" id="btn1">打开窗口</button>
		<button type="button" οnclick="test()">关闭窗口</button>

		<hr>
		<h2>时间函数</h2>
		<button type="button" οnclick="toBaidu()">3秒钟后跳转到百度</button>
		<hr>
		<button type="button" οnclick="init()">开始</button>
		<button type="button" οnclick="stop()">暂停</button>
		<h2 id="time"></h2>
		<hr>
		<button type="button" οnclick="hello()">定时执行</button>
	</body>
	<!--
		系统对话框
			（1）消息框:alert， 常用。
				alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
			（2）输入框:prompt，返回提示框中的值。
				prompt() 方法用于显示可提示用户进行输入的对话框。
				参数（可选）：
				   第一个参数：要在对话框中显示的纯文本。
				   第二个参数：默认的输入文本。
			（3）确认框:confirm，返回 true/false.
			confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
	 -->
	<script type="text/javascript">
		// 1）消息框:alert， 常用。
		function testAlert() {
			window.alert("Hello");
			console.log("你好...");
		}

		// 2）输入框:prompt，返回提示框中的值
		function testPrompt() {
			var uname = window.prompt("请输入用户名：", "");
			console.log(uname);
		}

		// 3）确认框:confirm，返回 true/false.
		function testConfirm() {
			var flag = confirm("您确认要删除该记录吗？");
			if (flag) {
				alert("删除成功！");
			} else {
				alert("没事别瞎点...");
			}
		}
	</script>
	<!--
	 	打开窗口
	 		window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口
	  -->
	<script type="text/javascript">
		document.getElementById("btn1").onclick = function() {
			// 打开空白窗口
			// window.open();
			// 打开指定页面
			// window.open("01-系统对话框.html");
			// 打开百度
			window.open("http://www.baidu.com");
			// 指定方式打开页面
			// window.open("http://www.baidu.com","_self");
			// 打开页面
			//window.open("03-关闭窗口.html");
		}
	</script>
	<!--
		关闭窗口window.close()：关闭窗口。
	 -->
	<script type="text/javascript">
		function test() {
			window.close();
		}
	</script>
	<!--
	  	setTimeout()
	  		setTimeout() : 在指定的毫秒数后调用