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

时间：2022-09-01 11:00:09

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>

实例效果图

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

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>

实例结果图

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

原创作者：DSHORE

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

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

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

java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）的更多相关文章

  1. java基础62 JavaScript中的函数（网页知识）

    1.JavaScript中,函数的格式 function 函数名(形参列表){ 函数体; } 2.JavaScript中,函数需要注意的细节 1.在javaScript中,函数定义形参时,是不能使用v ...

  2. java基础64 JavaScript中的Arrays数组对象和prototype原型属性（网页知识）

    1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...

  3. java基础65 JavaScript中的Window对象（网页知识）

    1.javaScript组成部分 1.EMCAScript(基本语法)    2.BOM(Browser Object Model):浏览器对象模型            浏览器对象模型中的浏览器的各 ...

  4. java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）

    本文知识点(目录): 1.Number对象    2.Math对象    3.String对象    4.Date对象 (日历例子) 1.Number对象 1.1.Number对象的创建方式 方式1: ...

  5. java基础57 css样式、选择器和css定位（网页知识）

    本文知识点(目录): 1.CSS样式    2.选择器    3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构    2.css(层叠样式表)在一个页面中负责了一个页面 ...

  6. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  7. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  8. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  9. 了解javascript中的事件（二）

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

随机推荐

  1. vue中，class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)&quot ...

  2. Latex中画出函数文件的调用关系拓扑图

    流程图,思维导图,拓扑图通常能把我们遇到的一些复杂的关系结构用图形的方式展现出来.在Latex中要想画这样的拓扑图,有一个很好用的绘图工具包 pgf/tikz . 1.pgf/tikz的安装:pgf/ ...

  3. 开源安卓Http文件下载框架file-downloader的使用

    file-downloader FileDownloader(https://github.com/wlfcolin/file-downloader)是本人开源的一个安卓Http文件下载框架,是根据自 ...

  4. SQL Server如何启用xp&lowbar;cmdshell组件

    [错误描述]: SQL Server阻止了对组件‘xp_cmdshell’的过程‘sys.xp_cmdshell’的访问.因为此组件已作为此服务嚣安全配置的一部分而被关闭.系统管理员可以通过使用sp_ ...

  5. T-SQL 操作练习

    create table Person #新建表格 ( Ids int auto_increment primary key, #主键,自增 Name ) not null, #非空 Age int, ...

  6. 第六篇 ORACLE EBS用户界面通用元素或功能背后的道理解析

    本篇打算介绍一下ORACLE EBS用户界面(User Interface)中通用的元素或功能背后蕴含的一些道理.这些通用元素或功能包括: List of Values (LOV),值列表 Flexf ...

  7. web版扫雷小游戏（三）

    ~~~接上篇,上篇介绍了游戏实现过程中第一个比较繁琐的地方,现在展现在玩家面前的是一个有血有肉的棋盘,从某种意义上说玩家已经可以开始游戏了,但是不够人性化,玩家只能一个一个节点的点开,然后判断,然后标 ...

  8. Linux进阶命令-sort、uniq、 cut、sed、grep、find、awk

    命令难度总体来说有简入难,参数都是工作中常常用到的.如果涉及到一些生僻的参数还请百度或man一下. sort(参考学习网站:http://www.cnblogs.com/dong008259/arch ...

  9. final&comma;finally&comma;finalize有什么区别？String&comma; StringBuffer&comma; StringBuilder有什么区别？Exception和Error有什么区别？

    继上篇JVM学习之后,后面将分三期深入介绍剩余JAVA基础面试题,每期3题. 题目一.final,finally,finalize有什么区别? /*请尊重作者劳动成果,转载请标明原文链接:*/ /* ...

  10. web网页上面调用qq

    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2812415198&site=q ...

相关文章