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