java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）

1、JavaScript中的事件注册

1.1、事件的注册方式

方式1：直接在html元素上注册
    <body onLoad="ready()"></body >
    function read(){
        alert("body元素被加载进来");
    }

方式2：可以在js代码向找到对应的对象注册。推荐使用

实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <!-- 方式1第二个测试用例 -->
 9 <body id="body">
10 </body>
11 <script type="text/javascript">
12     /*function read(){//方式1第一个测试用例
13         alert("body元素被加载进来");
14     }*/
15 
16     var bodyNode = document.getElementById("body");//方式1第二个测试用例
17     bodyNode.onload = function(){
18         alert("body的元素被加载完毕");    
19 } 
20 </script>
21 <!-- 方式1第一个测试用例
22 <body onLoad="ready()">
23 </body >
24 -->
25 </html>

1.2、JavaScript常用的事件

1.2.1、鼠标点击相关的事件
    onClick()：在用户用鼠标左键单击对象时触发。
    onDblClick()：当用户双击对象时触发。
    onMouseDown()：当用户用任何鼠标按钮单击对象时触发。
onMouseUp()：当用户在鼠标位于对象之上时释放鼠标按钮时触发。

1.2.2、鼠标移动相关
onMouseOut()：当用户将鼠标指针移出对象边界时触发。
onMouseOver()：当用户将鼠标指针移动到对象内时触发。

1.2.3、焦点相关的
onBlur()：在对象失去输入焦点时触发。
onFocus()：当对象获得焦点时触发。

1.2.4、其他
    onChange()：当对象或选中区的内容改变时触发。
    onLoad()：在浏览器完成对象的装载后立即触发。
    onSubmit()：当表单将要被提交时触发。

实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <script type="text/javascript">
 8     function clickTest(){
 9         alert("单击触发事件");
10     }
11     function dbClick(){
12         alert("双击触发事件");
13     }
14     function mouseDown(){
15         alert("左键或右键单击触发事件");
16     }
17     function mouseUp(){
18         alert("释放触发事件!");
19     }
20     function moseOut(){
21         alert("移出对象外触发事件!");
22     }
23     function mouseOver(){
24         alert("移进对象内触发事件");
25     }
26     function showInfo(){
27         var timeSpan=document.getElementById("userName");
28         timeSpan.innerHTML="用户名只能用6位以上的英文和数字组成".fontcolor("red");//把后面的字符串写到HTML上(内)；单击该对象时，显示该内容
29     }
30     function hideInfo(){
31         var timeSpan=document.getElementById("userName");
32         timeSpan.innerHTML="111";//把后面的字符串写到HTML上(内)；单击该对象外的其他对象时，显示该内容。（此处不写任何内容最好，为了显示效果，我写上111作为演示）
33     }
34     function change(){
35         alert("城市发生改变！");
36     }
37 </script>
38 
39 <body>
40 <input type="button" onClick="clickTest()" value="鼠标(单击)时触发"/>
41 <input type="button" onDblClick="dbClick()" value="鼠标(双击)时触发"/>
42 <input type="button" onMouseDown="mouseDown()" value="鼠标(左/右键)单击时触发"/>
43 <input type="button" onMouseUp="mouseUp()" value="鼠标按着按钮(释放)后触发"/>
44 <input type="text" onMouseOut="moseOut()" value="鼠标从文本框(出来)时触发"/>
45 <input type="text" onMouseOver="mouseOver()" value="鼠标(进来)文本框时触发"/>
46 <br/><br/>
47 用户名：<input type="text" onFocus="showInfo()" onBlur="hideInfo()"/><span id="userName"></span> 
48 <br/><br/>
49 <select onChange="change()">
50     <option>北京</option>
51     <option>上海</option>
52     <option>广州</option>
53     <option>深圳</option>
54     <option>武汉</option>
55 </select>
56 </body>
57 </html>

实例效果图

2、JavaScript中的localtion对象

2.1、localtion对象的常用方法

    href：设置或返回完整的 URL。若对其赋值：location.href="http://www.baidu.com" 则跳转到你指定的URL中去。
    protocol：设置或返回当前 URL 的协议,即双斜杠（//）之前的部分。
    host：设置或返回主机名和当前 URL 的端口号。
    hostname：设置或返回当前 URL 的主机名。
    port：设置或返回当前 URL 的端口号。默认情况下，大多数URL没有端口信息（默认为80端口），所以该属性通常是空白的。像https://cardtest.ffan.com:8080/app/ffanbao/location.html这样的URL的port属性为8080.
    pathname：设置或返回当前 URL 的路径部分。
    hash：设置或返回从井号 (#) 开始的 URL（锚）。
    search：设置或返回从问号 (?) 开始的 URL（查询部分）。
    location.origin：协议名、主机名和端口号

javascript中Location对象使用详解：https://blog.csdn.net/hellwhisper/article/details/7984027 或 https://blog.csdn.net/u014490083/article/details/78643610

2.2、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <!--<script type="text/javascript">
 8     /*//下面两条代码的作用是：打开页面后将会跳转到http://www.sunchis.com的页面。
 9     location.assign ("http://www.baidu.com");
10     location.href = "http://www.baidu.com";*/
11     
12     //此函数的作用：单击后跳转到指定的“百度”页面
13     function hrefTest(){
14         location.href = "http://www.baidu.com";    
15     }
16 </script>-->
17 <script type="text/javascript">    
18 
19     //hash:返回#符号后的内容
20     function showhash() {
21         alert(window.location.hash);
22     }
23 
24     //host:服务器的名字
25     function showhost() {
26         alert(window.location.host);
27     }
28 
29     //href:当前载入的页面的完整的URL
30     function showhref() {
31         alert(window.location.href);
32     }
33 
34     //pathname:url中主机名后的部分
35     function showpathname() {
36         alert(window.location.pathname);
37     }
38 
39     //protocal:URL中使用的协议
40     function showprotacal() {
41         alert(window.location.protocal);
42     }
43 
44     //search:执行get请求的URL中问号后面的部分，又称为查询字符串
45     function showsearch() {
46         alert(window.location.search);
47     }
48 </script>
49 <body>
50     <!--<input type="button" onClick="hrefTest()" value="属性：href"/>-->
51     <input type="button" value="属性：Hash" onclick="showhash();" />
52     <br/>
53     <input type="button" value="属性：host" onclick="showhost();" />
54     <br/>
55     <input type="button" value="属性：href" onclick="showhref();" />
56     <br/>
57     <input type="button" value="属性：pathname" onclick="showpathname();" />
58     <br/>
59     <input type="button" value="属性：protocal" onclick="showprotacal();" />
60     <br/>
61     <input type="button" value="属性：search" onclick="showsearch();" />
62 </body>
63 </html>

说明：上面代码并不能完全测试出想要的效果

可以参考：https://blog.csdn.net/liu_111111/article/details/8794208

3、JavaScript中的screen对象

3.1、Screen(屏幕对象)的常用方法

    availHeight：获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
    availWidth：获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
    height：获取屏幕的垂直分辨率。
    width：获取屏幕的水平分辨率。

3.2、实例

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5 <script type="text/javascript">
 6     document.write("获取系统屏幕工作区域的高度:"+screen.availHeight+"</br>");
 7     document.write("获取系统屏幕工作区域的宽度:"+screen.availWidth+"</br>");
 8     document.write(" 获取屏幕的垂直分辨率:"+screen.height+"</br>");
 9     document.write(" 获取屏幕的水平分辨率:"+screen.width+"</br>");
10 </script>
11 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
12 <title>无标题文档</title>
13 </head>
14 
15 <body>
16 </body>
17 </html>