# 事件流  
## 说明
当一个html元素上产生事件时，该事件会在dom树元素节点之间按照特定的顺序去传播。传播路径的每一个节点都会收到这个事件，事件流则描述了页面接受事件的顺序  



## 分类  
IE公司提出事件冒泡流  
网景公司提出事件捕获流  

# 事件对象  
## 说明 
在DOM中发生事件时，所有相关的信息都会被收集并存储在一个名为event的对象中。此对象包含一些基本信息，如导致事件的元素、发生的事件类型、以及可能与特定事件相关的任何其它数据  

常写在监听事件函数的小括号中，视为形参  

## 特点  
- 注意事件对象只有在事件发生时才会产生，无法手动创建 
- <font style="color:red">事件对象是传给事件处理程序的唯一参数</font>    
- 事件对象只能在处理函数内部访问，处理函数允许结束后该对象自动销毁   


## 事件对象常用属性和方法  
属性/方法 | 说明
---|---
target | 事件目标
bubbles | 表示事件是否冒泡  
type | 表示被触发的事件类型



# 事件源  
事件对象的属性返回触发事件的对象 
```
事件对象.target  
```

JS-事件流、事件对象和事件源

# onkeydown事件  
## 说明  
当用户按下某个键时触发事件  



## 语法  
```
//html中
<element onkeydown="SomeJavaScriptCode">
//javascript中  
object.onkeydown=function(){SomeJavaScriptCode};
```
参数  
SomeJavaScriptCode：规定事件发生时执行的代码  


# onkeyup事件  
## 说明  
当用户松开按键时触发事件  
## 语法  
```
//html中  
<element onkeyup="SomeJavaScriptCode">
//javascript  
object.onkeyup=function(){SomeJavaScriptCode};  
```
参数  
SomeJavaScriptCode：规定事件发生时执行的代码

JS-键盘事件

# onfocus事件  
## 说明   
在对象获得焦点时发生，不冒泡     



## 语法  
- HTML  
```
<element onfocus="SomeJavaScriptCode">
```
- JS
```
object.onfocus=function(){SomeJavaScriptCode}  
```
## 支持的元素   
onfocus 属性通常用于所有 HTML 元素，除了：
```
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.
```



# onblur事件  
## 说明  
在对象失去焦点时发生，没有冒泡阶段  
## 语法  
- HTML  
```
<element onblur="SomeJavaScriptCode">
```

- JS 
```
object.onblur=function(){SomeJavaScriptCode};
```
## 支持的元素  
onblur 属性可以适用于所有 HTML 元素,除了： 
```
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.
```


# onchange事件  
## 说明  
在域的内容改变时触发。onchange事件也可用于单选框与复选框改变后触发的事件  
## 语法  
- HTML  
```
<element onchange="SomeJavaScriptCode">
```

- JavaScript  
```
object.onchange=function(){SomeJavaScriptCode};
```

JS-表单事件

# onclick事件  
## 说明  
在元素被点击时发生  
## 语法  
- HTML  
```
<element onclick="SomeJavaScriptCode">
```



- JS
```
object.onclick=function(){SomeJavaScriptCode};
```
## 注意
等号右侧一定为函数  


# onmouseover事件  
## 说明  
在鼠标指针移动到指定的元素上时发生  
## 语法  
- HTML
```
<element onmouseover="SomeJavaScriptCode">
```
- JS  
```
object.onmouseover=function(){SomeJavaScriptCode};
```


# onmouseout事件  
## 说明  
在鼠标指针移出指定的对象时发生  
## 语法  
- HTML
```
<element onmouseout="SomeJavaScriptCode">
```

- JS
```
object.onmouseout=function(){SomeJavaScriptCode};
```


# onmousemove事件  
## 说明  
鼠标移动时发生  
## 语法  
- HTML 
```
<element onmousemove="SomeJavaScriptCode">
```

- JS 
```
object.onmousemove=function(){SomeJavaScriptCode};
```


# onchange事件  
## 说明  
onchange事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事   
## 语法  
```
object.onchange = function() {

}
```

JS-鼠标事件

# 事件的基础概念  
发生在 HTML 元素上的事情，用于实现js与html的交互，事件代表文档或浏览器窗口中具有某个特定意义的时刻，即用户或浏览器指向的某种动作  



# 常用事件  

事件 | 说明
---|---
onchange | HTML 元素改变  
onclick | 用户点击 HTML 元素  
onmouseover | 用户在一个HTML元素上移动鼠标  
onmouseout | 	用户从一个HTML元素上移开鼠标  
onkeydown |	用户按下键盘按键  
onload | 浏览器已完成页面的加载  

# 绑定事件的方式  
## 声明函数  
### 说明  
声明函数后，将函数赋值给对象的事件  
### 语法  
```
object.onclick = function() {
    
}
```
### Eg   

```
<body>
 <div id="banner" style="font-size: 20px;width:100px;height:100px">ok<div>
 <script>
  var a =document.getElementById("banner");
  a.onclick = function() {
      alert("test")
  }
 </script>
</body>
```

## Document对象的addEventListener方法  
### 说明  
用于向文档添加事件句柄，此方法可以多次对同一元素绑定多个事件，按照绑定事件顺序执行    
### 语法  
#### 绑定事件  
```
元素对象.addEventListener("事件名",方法,是否在捕获阶段触发)
//即
object.addEventListener(event, function, useCapture)
```
参数  
event: 描述事件名称的字符串，<font style="color:red"> 不要使用 "on" 前缀[Eg:使用"click"来取代"onclick"]</font>  

function: 事件触发后执行的函数  

useCapture: 可选布尔值，指定事件是否在捕获或冒泡阶段执行  
  - true - 事件句柄在捕获阶段执行
  - false-默认。事件句柄在冒泡阶段执行  

返回值： 无  

#### 移除事件  
```
元素对象.removeEventListener("事件名",方法对象,是否在捕获阶段触发)
```