Web前端学习（4）_BOM编程_事件编程

最新推荐文章于 2024-05-26 19:11:04 发布

晴天小风

最新推荐文章于 2024-05-26 19:11:04 发布

阅读量526

点赞数

分类专栏： JavaWeb笔记 Web前端笔记文章标签： javascript BOM编程事件编程 DOM编程正则表达式

本文链接：https://blog.csdn.net/Ag_nevergiveup/article/details/73702885

版权

JavaWeb笔记同时被 2 个专栏收录

41 篇文章 1 订阅

订阅专栏

Web前端笔记

31 篇文章 0 订阅

订阅专栏

Web前端学习（4）_BOM编程_事件编程

这篇来写关于BOM编程、事件编程的内容。

1.BOM编程

1.1 BOM编程

将浏览器的各个部分封装成了不同的对象）

BOM是（Broswer Object Model）浏览器对象模型编程

1.2 window对象

open(): 在一个窗口中打开页面

参数一：打开的页面

参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认）

参数三：设置窗口参数。比如窗口大小

例如打开一个tc.html窗口：
function testOpen(){
		window.open("tc.html","_blank","width=350px;height=300px");
		}
setInterval(): 设置定时器（执行n次）

setTimeout(): 设置定时器(只执行1次)

定时器：每隔n毫秒调用指定的任务（函数）

参数一：指定的任务（函数）

参数二：毫秒数

clearInterval(): 清除定时器

clearTimeout(): 清除定时器

清除任务

参数一：需要清除的任务ID

执行n次任务以及暂停：
var id1;
	function testSetInterval(){
		 id1 = window.setInterval("testOpen()",4000);
	}
		
	function testClearInterval(){
		window.clearInterval(id1);
	}
执行1次任务以及暂停：
var id2;
	function testSetTimeOut(){
		 id2 = window.setTimeout("testOpen()",4000);
	}
	function testClearTimeout(){
		window.clearTimeout(id2);
	}
alert(): 提示框

仅仅有确定按钮

confirm(): 确认提示框

返回值就是用户操作

true: 点击了确定

false：点击了取消
function testConfirm(){
		window.confirm("12345");
	}
propmt(): 输入提示框

返回值就是用户操作

true: 点击了确定

false：点击了取消
function testPropmt(){
		window.prompt("输入:");
	}
注意：

因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。

1.3 location对象

href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符

reload方法：刷新当前页面
function getHref(){
		var url = window.location.href;
		alert(url);
	}
	
	function setHref(){
		window.location.href="tc.html";
	}
	
	function testRefresh(){
		window.location.reload();
	}
	
	window.setInterval("testRefresh()",1500);
1.4 history对象

forward(): 前进到下一页

back(): 后退上一页

go(): 跳转到某页（正整数：前进负整数：后退）
function testForward(){
		window.history.forward();
	}
	function testBack(){
		window.history.back();
	}
1.5 screen对象（学习四个属性）

availHeight和availWidth

是排除了任务栏之后的高度和宽度

width和height

是整个屏幕的像素值
<script type="text/javascript">
	document.write("实际宽度"+window.screen.width);
	document.write("<br>");
	document.write("的实际高度"+window.screen.height);
	document.write("<br>");
	document.write("可用宽度"+window.screen.availWidth);
	document.write("<br>");
	document.write("可用高度"+window.screen.availHeight);
	document.write("<br>");
</script>

2. 事件编程

2.1 javascript事件编程的三个要素：

1）事件源：html标签

2）事件：click dblclick mouseover
3）监听器：函数

2.2 javascript事件分类：
A.点击相关的：
单击： onclick
双击： ondblclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	/*点击相关的：
	 单击： onclick
	 双击： ondblclic
	 */
	 function testClick(){
		 alert("单击事件");
		 }
	function testDbClick(){
		 alert("双击事件");
		}
				 
</script>
</head>
<body>
<input type="button" value="单击事件" οnclick="testClick()" />
<input type="button" value="双击事件" οndblclick="testDbClick()" />
</body>
</html>

B.焦点相关的：
聚焦： onfocus

失去焦点： onblur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	/*焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）
		聚焦：  onfocus
		失去焦点： onblur
	*/
	//获得焦点事件
	function testOnfocus(){
		var input = document.getElementById("name");
		input.value="";
		}
	//失去焦点事件
	function testOnblur(){
		var input = document.getElementById("name").value;
		var span = document.getElementById("s");
		if("ag"==input){
			span.innerHTML="用户名已经存在!".fontcolor("red");
			}else{
				span.innerHTML="该用户名合法!".fontcolor("green");
				}
	}
</script>
</head>

<body>
<input type="text" value="请输入用户名" id="name" οnfοcus="testOnfocus()" οnblur="testOnblur()"  /> 
<span id="s"></span>
</body>
</html>

C.选项相关的：（select选项改变）
改变选项： onchange

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	/*选项相关的：（select选项改变，做一个籍贯选项）
		改变选项： onchange
	*/
	function testOnchange(){
		var province = document.getElementById("s").value;
		var city = document.getElementById("c");
		city.innerHTML="<option>--请选择-</option>";
		switch(province){
			case "陕西":
			city.innerHTML="<option>榆林</option><option>西安</option>"
			break;
			case "河南":
			city.innerHTML="<option>郑州</option><option>洛阳</option>"
			break;
			case "四川":
			city.innerHTML="<option>成都</option><option>都江堰</option>"
			break;
			}
		}
</script>
</head>

<body>
<select οnchange="testOnchange()" id="s">
<option>--请选择--</option>
<option value="陕西">陕西</option>
<option value="河南">河南</option>
<option value="四川">四川</option>
</select>

<select id="c">
</select>
</body>
</html>

D.鼠标相关的：
鼠标经过： onmouseover
鼠标移除： onmouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
	/*鼠标相关的：（画一个div区块进行演示）
		鼠标经过： onmouseover
		鼠标移出： onmouseout
	*/
	function testOnmouseover(){
		alert("鼠标经过了！");
		}
	function testOnmouseout(){
		alert("鼠标移出了！");
		}
	
</script>
</head>

<body>
<div id="d1" style="width:300px;height:300px; border:2px solid #0C3"οnmοuseοver="testOnmouseover()" οnmοuseοut="testOnmouseout()">div1</div>
</body>
</html>

E.页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）
页面加载： onload

晴天小风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习（4）_BOM编程_事件编程

Web前端学习（4）_BOM编程_事件编程_DOM编程这篇来写关于BOM编程、事件编程以及DOM编程的内容。1.BOM编程1.1 BOM编程将浏览器的各个部分封装成了不同的对象）BOM是（Broswer Object Model）浏览器对象模型编程
复制链接

扫一扫

专栏目录