javascript中的事件处理 1.常用的事件 1.页面初始化事件 onload <script> function testLoad(){ alert("页面初始化事件"); } </script> <body οnlοad="testLoad();"> <script> window.οnlοad=function(){ alert("页面初始化事件"); } </script> 2.按钮点击事件 onclick<script> function testclick(){ alert("按钮点击事件"); } </script> <input type="button" id="but1" value="测试按钮点击事件" οnclick="testclick();"/> <script> //当页面打开的时候 window.οnlοad=function(){ //得到按钮的dom对象 var butobj=document.getElementById("but1"); butobj.οnclick=function(){ alert("按钮点击事件"); } } </script> 3.onchange 事件,当用户改变输入字段的内容时触发 <script> function testchange(){ alert("文本框内容改变事件"); } </script> <input type="text" id="text1" value="测试onchange事件" οnchange="testchange();"/> //当页面打开的时候 window.οnlοad=function(){ //得到文本框对应的dom对象 var textObj=document.getElementById("text1"); textObj.οnchange=function(){ alert("文本框内容改变事件"); } } 4.onfocus当获得焦点时触发 5.onblur当失去焦点时触发 //得到文本框对应的dom对象 var textObj2=document.getElementById("text2"); textObj2.οnfοcus=function(){ textObj2.value=""; } textObj2.οnblur=function(){ var textvalue=textObj2.value; alert("文本框=="+textvalue); }6.onmouseover 和 onmouseout 事件 //得到div对应的dom对象 var divObj=document.getElementById("div1"); divObj.οnmοuseοver=function(){ divObj.style.width="100px"; divObj.style.height="100px"; } divObj.οnmοuseοut=function(){ divObj.style.width="200px"; divObj.style.height="200px"; } 7.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。 注意:1.设置在form表单上 2.提交表单数据的按钮一定是type="submit" 3.οnsubmit="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 - 浏览器窗口的内部宽度 <script> window.οnlοad=function(){ //得到浏览器窗口的宽度 var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight; alert(w+" X "+h); } </script> 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 的查询部分(问号 ? 之后的部分)。 history---历史对象 history.back() - 与在浏览器点击后退按钮相同 history.forward() - 与在浏览器中点击按钮向前相同 navigator--浏览器的信息 [了解] window.navigator 对象包含有关访问者浏览器的信息。