JavaScript事件处理与BOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67246843/article/details/123685207

javascript中的事件处理
1.常用的事件
1.页面初始化事件 onload ；2.按钮点击事件 onclick ；3.onchange 事件，当用户改变输入字段的内容时触发；4.onfocus当获得焦点时触发；5.onblur当失去焦点时触发；6.onmouseover 和 onmouseout 事件；

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 - 浏览器窗口的内部宽度

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

javascript6