JavaScript高级(6)-优快云博客

本文链接：https://blog.youkuaiyun.com/Text789/article/details/123672442

本文详细介绍了JavaScript中的各种事件，包括页面初始化、按钮点击、文本框内容改变、焦点和鼠标悬停事件等，并展示了如何设置和处理这些事件。此外，还探讨了JavaScript中的BOM对象，如window对象的属性、方法，以及screen、location、history和navigator等子对象的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.常见的事件

(1)页面初始化事件 onload

<script>

（2）按钮点击事件 onclick

(3)onchange 事件，当用户改变输入字段的内容时触发

//当页面打开的时候
window.onload=function(){
   //得到文本框对应的dom对象
   var textObj=document.getElementById("text1");
   textObj.onchange=function(){
       alert("文本框内容改变事件");
   }
}

(4)onfocus当获得焦点时触发

(5)onblur当失去焦点时触发

//得到文本框对应的dom对象
var textObj2=document.getElementById("text2");
textObj2.onfocus=function(){
   textObj2.value="";
   }
textObj2.onblur=function(){
   var textvalue=textObj2.value;
   alert("文本框=="+textvalue);
}

(6)onmouseover 和 onmouseout 事件

//得到div对应的dom对象
var divObj=document.getElementById("div1");
divObj.onmouseover=function(){
   divObj.style.width="100px";
   divObj.style.height="100px";
}
divObj.onmouseout=function(){
   divObj.style.width="200px";
   divObj.style.height="200px";
}

(7)onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。

       注意:1.设置在form表单上
       2.提交表单数据的按钮一定是type="submit"
       3.onsubmit="return 事件处理函数();"
       4.对应的事件处理函数一定有返回值，且返回值是boolean值
           true---提交表单数据到后端处理程序
           false-----不提交表单数据到后端处理程序

(8)onkeydown 事件会在用户按下一个键盘按键时发生。

       注意:onkeydown在设置的时候通常设置给body,对应处理函数要有event参数
       参数event---键盘对象
       event对象.keyCode----得到键盘按键的数字值

2.事件的设置方式

(1)在html元素标记中设置事件，在script中处理事件

(2)在script标记中通过html元素的dom对象设置/处理事件

JavaScript中的BOM对象
   BOM---浏览器对象模型--Browser Object Model
   主要就是window对象
(1).常见属性
   获取浏览器窗口的大小【宽高不包括工具栏和滚动条】

       获取浏览器窗口的大小【宽高不包括工具栏和滚动条】
       对于 Internet Explorer 8、7、6、5
       document.documentElement.clientHeight
       document.documentElement.clientWidth
       或者
       document.body.clientHeight
       document.body.clientWidth
       对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
       window.innerHeight - 浏览器窗口的内部高度
       window.innerWidth - 浏览器窗口的内部宽度

(2)常见方法

       打开/关闭窗口
       window.open(URL,name,features,replace)
       URL---一个可选的字符串，声明了要在新窗口中显示的文档的 URL
       “about:blank”空白窗口
       name--一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。
       这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。
       features---一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。

       replace---一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
       true - URL 替换浏览历史中的当前条目。
       false - URL 在浏览历史中创建新的条目。

close() 方法用于关闭浏览器窗口。

弹出框
           警告框:window.alert("sometext");
           确认框:window.confirm("sometext");
           提示框:window.prompt("sometext","defaultvalue");

(3).常见子对象
       screen--屏幕
       1.总宽度和总高度 --- screen.width / screen.height<br>
       2.可用宽度和可用高度----screen.availWidth / screen.availHeight<br>
       3.色彩深度----screen.colorDepth<br>
       4.色彩分辨率----screen.pixelDepth

location---页面的地址 (URL)
location.href 属性返回当前页面的 URL。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

window.onload=function(){
   //alert(window.location.search); //?myname=zhangsan&mypass=123456
   var info=window.location.search;
   var infoarray=info.split("&");
   var msg=infoarray[0]; //?myname=zhangsan
   var msgarray=msg.split("=");
   var hobj=document.getElementsByTagName("h1")[0];
   hobj.innerText=msgarray[1]+",登陆成功";
}
</script>

   history---历史对象
   history.back() - 与在浏览器点击后退按钮相同
   history.forward() - 与在浏览器中点击按钮向前相同

   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           window.onload=function(){
               var butOBJ=document.getElementById("but");
               butOBJ.onclick=function(){
                   window.history.back();
               }
           }
       </script>
   </head>
   <body>
       <h1>测试history---历史对象</h1>
       <h1>history.back() - 与在浏览器点击后退按钮相同</h1>
       <input type="button" id="but" value="上一个页面" />
   </body>