[TOC]
---
[練習地址](https://github.com/webxiaoma/JavaScript-demos/tree/master/JS%E4%BA%8B%E4%BB%B6)
### 一、什么是js事件
> 事件是與瀏覽器或文檔交互的瞬間，如點擊按鈕，填寫表格等，它是JS與HTML之間交互的橋梁。
### 二、HTML 中觸發js的幾種方法
1. 第一種,直接在HTML 內嵌js
```HTML
<button id="div" onclick="javascript:var a = 1+3; alert(a);" >
點擊我
</button>
```
2. 第二種
```HTML
<button id="div1" onclick="fun()" >
點擊我
</button>
<script>
function fun(){
alert("我是第二種方法")
}
</script>
```
3. 第三種
```HTML
<button id="div2" >
點擊我
</button>
<script>
document.getElementById("div2").onclick = function (){
alert("我是第三種方法")
}
</script>
```
4. 事件監聽和移除
```HTML
<button id="div3" >
addEventListener 點擊我
</button>
<script>
function myFun(){
console.log("觸發了")
}
document.getElementById("div3").addEventListener('click',myFun)
setTimeout(function(){
document.getElementById("div3").removeEventListener("click",myFun)
},3000)
</script>
```
### 三、js 常用的事件
[js詳細事件-見菜鳥教程](http://www.runoob.com/jsref/dom-obj-event.html)
這里講幾個特殊事件：
- `onmouseenter` 當鼠標指針移動到元素上時觸發。
- `onmouseleave` 當鼠標指針移出元素時觸發
- `onmouseover` 鼠標移到某元素之上。
- `onmouseout` 鼠標從某元素移開。
> `onmouseenter` 和 `onmouseover` 都是移動到元素上時觸發，但是區別是`onmouseenter`移動到子元素上時也會再次觸發并且還會再次冒泡到父元素，而`onmouseover` 只觸發一次，當移動到元素的子元素時不會在有再觸發也不會在冒泡,
### 四、事件（合成）對象Event
> Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
> 事件通常與函數結合使用，函數不會在事件發生前被執行！
Event 對象 是在鼠標鍵盤事件觸發時，注入到觸發函數中的，以函數中第一個參數來表示。例如：
```JavaScript
var div1 = document.querySelector('.div1')
div1.onmouseenter = function(event){
//event.target 獲取到的是觸發的事件源，這里只 id為 div1 的元素
console.log(event.target)
}
```
#### 1. 獲取 鍵盤按鍵信息
```JavaScript
let body = document.querySelector('body')
body.onkeydown = function(e){
// 當鍵盤按鍵按下時會輸出所按下的按鈕名稱
console.log(e.key)
}
```
#### 2. 獲取鼠標位置
**2.1 瀏覽器的可視坐標 clientX與clientY**
```JavaScript
let body = document.querySelector('body')
body.onmousemove = function(e){
console.log('鼠標所在瀏覽器中的X坐標：'+ e.clientX)
console.log('鼠標所在瀏覽器中的Y坐標：'+ e.clientY)
}
```
需要注意的是： 再給body添加事件時要給body設置高度，因為body默認高度為0
**2.2 設備屏幕坐標 screenX與 screenY**
```JavaScript
let body = document.querySelector('body')
body.onmousemove = function(e){
console.log('鼠標所在設備屏幕中的X坐標：'+ e.screenX)
console.log('鼠標所在設備屏幕中的Y坐標：'+ e.screenY)
}
```
**2.3 movementX 和 movementY 坐標軸**
`movementX` 和 `movementY` 鼠標位置是以鼠標進入元素時的x和y軸為初始坐標（0,0）, 向左x軸坐標為負值，向右x軸坐標為正值，向上y軸坐標為正值，向下為負值。
```JavaScript
let body = document.querySelector('body')
body.onmousemove = function(e){
console.log('鼠標的X坐標：' + e.movementX)
console.log('鼠標的Y坐標：'+ e.movementY)
}
```
#### 3. 獲取鼠標按鈕
在`onmousedown` 事件中我們可以通過 `event.button` 來獲取鼠標按下的信息
以webkit 內核的瀏覽器為例:
```JavaScript
body.onmousedown = function(event){
console.log("鼠標按下左鍵為(0)：" + event.button)
console.log("鼠標按下滾輪鍵為(1)：" + event.button)
console.log("鼠標按下右鍵為(2)：" + event.button)
}
```
- 一般瀏覽器有默認行為，我們想阻止瀏覽器默認行為可以使用 `eventDefault()`
```JavaScript
document.body.oncontextmenu = function(event){
event.eventDefault() // 阻止瀏覽器出現右鍵菜單欄
}
```
### 五、事件的冒泡和捕獲
> 冒泡事件，由里向外，最里層的元素先執行，然后冒泡到外層。
> 捕獲事件，由外向里，最外層的元素先執行，然后傳遞到內部。
```HTML
<div class="div1">
<div class="div2">div2 我先冒泡后捕獲</div>
我先捕獲后冒泡
</div>
<script>
var div1 = document.querySelector('.div1')
var div2 = document.querySelector('.div2')
div1.onclick = function(){
alert("我是div1")
}
div2.onclick = function(){
alert("我是div2")
}
</script>
```
1. 阻止事件冒泡可以使用 `stopPropagation()`
```HTML
<div class="div1">
<div class="div2">div2 我先冒泡后捕獲</div>
我先捕獲后冒泡
</div>
<script>
var div1 = document.querySelector('.div1')
var div2 = document.querySelector('.div2')
div1.onclick = function(e){
alert("我是div1")
}
div2.onclick = function(e){
e.stopPropagation() // 阻止div2事件冒泡
alert("我是div2")
}
</script>
