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

你的名字 2022-06-13 02:53 200阅读 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("输入:");
>     	}
> 
> ![Center][]  
>   
> 
> 
> 注意：
> 
> 因为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>
> 
> ![Center 1][]  
> 
> 
>   
>

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>
> 
> ![Center 2][] ![Center 3][]  
>   
> 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>
> 
> ![Center 4][] ![Center 5][]  
>   
> 
> 
> 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>
> 
> ![Center 6][]  
>   
>   
> E.页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）  
> 页面加载： onload  
> 
> 
>   
>

[Center]: /images/20220613/cd54328049234a569071562b01de4a4c.png
[Center 1]: /images/20220613/ed198cdb577e4f8cad02c06d12546ae9.png
[Center 2]: https://img-blog.csdn.net/20170625141228057?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWdfbmV2ZXJnaXZldXA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20220613/d37765715eb3455298cc5b1c8d6f2acf.png
[Center 4]: https://img-blog.csdn.net/20170625143726076?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWdfbmV2ZXJnaXZldXA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: /images/20220613/2d6450f8764b41549616eac89bbbbe27.png
[Center 6]: /images/20220613/95c9c0ad691c410fa56d4b4a5561179b.png