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>
实例结果图
原创作者:DSHORE 作者主页:http://www.cnblogs.com/dshore123/ 原文出自:https://www.cnblogs.com/dshore123/p/9483118.html 欢迎转载,转载务必说明出处。(如果本文对您有帮助,可以点击一下右下角的 推荐,或评论,谢谢!) |
转载于:https://www.cnblogs.com/dshore123/p/9483118.html
java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)相关推荐
- java基础57 css样式、选择器和css定位(网页知识)
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一 ...
- 浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
- JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- java犯的小错误_[Java教程]十个JavaScript中易犯的小错误,你中了几枪?
[Java教程]十个JavaScript中易犯的小错误,你中了几枪? 0 2015-06-01 12:00:19 序言 在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见 ...
- Java基础之Java8中Map的compute的使用
Java基础之Java8中Map的compute的使用 一.介绍 Java8更新后,Map接口中提供了compute方法.下面我们先看看官方文档的对它的使用说明. 如果看完上面的还是不太明白的话,看下 ...
- 【前端学习】前端学习第十五天:JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
- 12.在JavaScript中的事件模型如何理解?
一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等 由于DOM是一个树结构,如果在 ...
- Java基础之Java8中map和flatMap的使用
Java基础之Java8中map和flatMap的使用 一.介绍 首先,看下map和flatMap的官方文档说明 map flatMap 其实单纯的看api说明还是比较抽象,下面我将以几个实战例子来帮 ...
- java中使用ajax请求数据格式,Java基本数据类型 javascript中post和ajax提交 Axure
Java基本数据类型 Java一共有八种基本类型,六种数据类型,一种字符类型,一种布尔类型 分别是 byte 是数据类型内存大小1,内存位数是8位,最小值是-128(-27),最大值:127(27-1 ...
最新文章
- SAP MM 史上最偷懒的盘点事务代码MI10
- linux zookeeper安装并设置开机自启
- java基础系列:集合总结(7)
- vlan、三层交换机、网关、DNS、子网掩码、MAC地址
- SetWindowLong
- WebAssembly已支持所有主流浏览器
- CentOS 分区方案
- 深入了解CSS字体度量,行高和vertical-align
- MATLAB 随机过程基本理论
- (80)FPGA建立时间与保持时间及时序模型-面试必问(四)(第16天)
- leetcode python3 简单题83. Remove Duplicates from Sorted List
- 安装Go 1.9.2
- 如何处理不能复现的bug?软件测试工程师避坑指南
- 栈的应用 算术表达式转换为后缀表达式
- spring源码 第二个后置处理器方法的使用-推断构造函数
- 高分辨率图像剪切——目标检测
- 水溶性羧基化 CdSe/ZnS 量子的特点
- 自动化冒烟测试:Unittest vs Pytest框架
- 【Vue】详解Vue生命周期
- 计算机应用技术专业名词解释,计算机应用技术名词解释--02316(26页)-原创力文档...
热门文章
- Line regulation和Load regulation
- 洋灰三角(矩阵快速幂的两种解法)
- A*启发式搜索算法详解 人工智能
- 如何接管SBO系统的内置业务流程
- 软件设计7种架构模式
- iOS快捷指令最全整理(支持iOS14),抖音去水印捷径快手去水印捷径
- postgresql 系统表
- window.onload匿名函数中element.onclick正确用法
- How to Deinstall Oracle Clusterware Home Manually
- Cocos2d-x 3.2 大富翁游戏项目开发-第二十五部分 大富翁股市