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

1、JavaScript中的事件注册

1.1、事件的注册方式

方式1：直接在html元素上注册

    <body onLoad="ready()"></body >

    function read(){

        alert("body元素被加载进来");

    }

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

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <!-- 方式1第二个测试用例 -->

 <body id="body">

 </body>

 <script type="text/javascript">

     /*function read(){//方式1第一个测试用例

         alert("body元素被加载进来");

     }*/

     var bodyNode = document.getElementById("body");//方式1第二个测试用例

     bodyNode.onload = function(){

         alert("body的元素被加载完毕");

 }

 </script>

 <!-- 方式1第一个测试用例

 <body onLoad="ready()">

 </body >

 -->

 </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()：当表单将要被提交时触发。

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <script type="text/javascript">

     function clickTest(){

         alert("单击触发事件");

     }

     function dbClick(){

         alert("双击触发事件");

     }

     function mouseDown(){

         alert("左键或右键单击触发事件");

     }

     function mouseUp(){

         alert("释放触发事件!");

     }

     function moseOut(){

         alert("移出对象外触发事件!");

     }

     function mouseOver(){

         alert("移进对象内触发事件");

     }

     function showInfo(){

         var timeSpan=document.getElementById("userName");

         timeSpan.innerHTML="用户名只能用6位以上的英文和数字组成".fontcolor("red");//把后面的字符串写到HTML上(内)；单击该对象时，显示该内容

     }

     function hideInfo(){

         var timeSpan=document.getElementById("userName");

         timeSpan.innerHTML="111";//把后面的字符串写到HTML上(内)；单击该对象外的其他对象时，显示该内容。（此处不写任何内容最好，为了显示效果，我写上111作为演示）

     }

     function change(){

         alert("城市发生改变！");

     }

 </script>

 <body>

 <input type="button" onClick="clickTest()" value="鼠标(单击)时触发"/>

 <input type="button" onDblClick="dbClick()" value="鼠标(双击)时触发"/>

 <input type="button" onMouseDown="mouseDown()" value="鼠标(左/右键)单击时触发"/>

 <input type="button" onMouseUp="mouseUp()" value="鼠标按着按钮(释放)后触发"/>

 <input type="text" onMouseOut="moseOut()" value="鼠标从文本框(出来)时触发"/>

 <input type="text" onMouseOver="mouseOver()" value="鼠标(进来)文本框时触发"/>

 <br/><br/>

 用户名：<input type="text" onFocus="showInfo()" onBlur="hideInfo()"/><span id="userName"></span>

 <br/><br/>

 <select onChange="change()">

     <option>北京</option>

     <option>上海</option>

     <option>广州</option>

     <option>深圳</option>

     <option>武汉</option>

 </select>

 </body>

 </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、实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <!--<script type="text/javascript">

     /*//下面两条代码的作用是：打开页面后将会跳转到http://www.sunchis.com的页面。

     location.assign ("http://www.baidu.com");

     location.href = "http://www.baidu.com";*/

     //此函数的作用：单击后跳转到指定的“百度”页面

     function hrefTest(){

         location.href = "http://www.baidu.com";

     }

 </script>-->

 <script type="text/javascript">    

     //hash:返回#符号后的内容

     function showhash() {

         alert(window.location.hash);

     }

     //host:服务器的名字

     function showhost() {

         alert(window.location.host);

     }

     //href:当前载入的页面的完整的URL

     function showhref() {

         alert(window.location.href);

     }

     //pathname:url中主机名后的部分

     function showpathname() {

         alert(window.location.pathname);

     }

     //protocal:URL中使用的协议

     function showprotacal() {

         alert(window.location.protocal);

     }

     //search:执行get请求的URL中问号后面的部分，又称为查询字符串

     function showsearch() {

         alert(window.location.search);

     }

 </script>

 <body>

     <!--<input type="button" onClick="hrefTest()" value="属性：href"/>-->

     <input type="button" value="属性：Hash" onclick="showhash();" />

     <br/>

     <input type="button" value="属性：host" onclick="showhost();" />

     <br/>

     <input type="button" value="属性：href" onclick="showhref();" />

     <br/>

     <input type="button" value="属性：pathname" onclick="showpathname();" />

     <br/>

     <input type="button" value="属性：protocal" onclick="showprotacal();" />

     <br/>

     <input type="button" value="属性：search" onclick="showsearch();" />

 </body>

 </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、实例

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <script type="text/javascript">

     document.write("获取系统屏幕工作区域的高度:"+screen.availHeight+"</br>");

     document.write("获取系统屏幕工作区域的宽度:"+screen.availWidth+"</br>");

     document.write(" 获取屏幕的垂直分辨率:"+screen.height+"</br>");

     document.write(" 获取屏幕的水平分辨率:"+screen.width+"</br>");

 </script>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html>

实例结果图

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9483118.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的推荐，或评论，谢谢！）