【客户端的某个动作行为的瞬间】
## 事件对象：event(关键字)
```javascript
//超链接绑定事件 阻止超链接的默认行为
//超链接内部可以直接执行js代码
<a href="javascript:void(0)"></a>
//阻止触发元素的默认行为，需要依赖事件对象
event.preventDefault()
//获取触发的元素节点
event.target
//事件的触发机制
//事件委托
```
onresize事件：捕获屏幕分辨率
## 鼠标事件：
鼠标点击：onclick
鼠标双击：ondbclick
鼠标移入：onmouseover onmouseenter
鼠标移出：onmouseout onmouseleave
右键右击：oncontextmenu
## 键盘事件：
按键按下：onkeydown
按键抬起：onkeyup
按键按下抬起：keypress
## 表单事件：
### 焦点事件：
获取焦点：onfocus
失去焦点：onblur
### 内容变更事件：onchange
### 表单验证事件
```javascript
<form οnsubmit="return fn()"></form>
//动态提交
document.form.submit()
document.form.method = "post"//提交方法post提交
```
## 滚动条事件：onscroll
```javascript
window.οnscrοll=function(){
//基于window对象触发，无法绑定给元素
}
```
```javascript
window.onscroll = function(){
console.log(document)//打印出来是#document <!DOCTYPE html></html>
console.log(document.documentElement)//打印出来是<html lang="en"></html>
var scrollTop = document.documentElement.scrollTop
console.log(scrollTop)//打印出来是距离顶部的高度
if(scrollTop>=100){
document.getElementsByClassName("floor")[0].style.display="block"
}else{
document.getElementsByClassName("floor")[0].style.display="none"
}
}
```
## 页面加载完毕
```javascript
window.οnlοad= function(){
//基于window对象触发，无法绑定给元素
}
```
## 鼠标滚轮事件
```javascript
window.οnwheel= function(){
}
```
## 移动端事件(touch)：
# js事件的绑定
【捕获客户端的动作行为】
```javascript
//超链接绑定事件 阻止超链接的默认行为
//超链接内部可以直接执行js代码
<a href="javascript:void(0)"></a>
//阻止触发元素的默认行为，需要依赖事件对象
event.preventDefault()
```
## 绑定事件的方式：
### 方式一：通过事件的属性来绑定事件
```javascript
<div onclick = "fn()"></div>
```
### 方式二：节点动态属性绑定
```
ele.onclick = function(){
【绑定匿名函数】
}
ele.onclick = fn【也可绑定正常函数】
```
### 方式三：给元素添加事件监听的方式
```javascript
ele.addEventListener("类型",方法体,[触发])
//类型：去掉on的部分即为类型，比如onclick中click是事件类型,on是固定的关键字
//方法体：function(){}
```
```javascript
//js事件场景：以冒泡的方式触发（事件嵌套）
<div οnmοuseοver=>
<p οnmοuseοver=>
<a href="#" οnclick=""></a>
</p>
</div>
add.removeEventLinear( ) //移出事件
```
# js获取各类屏幕的分辨率或者像素
```javascript
//获取滚动条距离顶部的高度（网页被卷去高度）
document.documentElement.scrollTop;
document.body.scrollTop;//部分老版本浏览器
```
js 获取各类屏幕分辨率或者像素：
获取滚动条距离顶部的高度(网页被卷去高度)
document.documentElement.scrollTop;
document.body.scrollTop;(部分老版本浏览器)
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight (html下获取浏览器高度，xhtml下获取元素总高度)
网页可见区域高：document.documentElement.clientHeight (xhtml下获取浏览器高度)
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
