13-jQuery事件綁定和常用鼠標事件

# 關於事件

## 事件綁定

1.**基本綁定**

> $(element).click(function(){})
>
> $(element).dblclick(function(){})
>
> 。。。
>
> 加載完畢事件
>
> $(document).ready(function(){})
>
> $(function(){})

2.**方法綁定**

> $(element).bind('click', function(){})//綁定事件
>
> $(element).unbind();//解除事件綁定

3.**動態綁定**

> $(element).live('click', function(){})
>
> 需注意，live方法在高版本的jquery中移出了,在使用時請注意版本

## 事件觸發

> 當我們想要去觸發某個元素的事件時可以使用 trigger,注意需指定元素的事件類型

```
$(element).trigger('click')
```

### 常用的鼠標事件

```
鼠標單擊事件 click
鼠標雙擊事件 dbclick
鼠標移入事件 mouseover
鼠標移出事件 mouseout
鼠標按下事件 mousedown
鼠標抬起事件 mouseup
鼠標移動事件 mousemove
```







## 事件冒泡和默認行為

**事件冒泡**

> 當觸發一個元素的事件時,會**自動觸發該元素的父級和先輩級的同類型事件**,**造成事件並發**,導致頁面混亂,我們稱為事件冒泡
>
> 此時我們可以在元素的事件處理函數中 返回一個false 來進行阻止,注意這個方法僅限於在jquery中使用

**默認行為**

> 在頁面中有些元素是具備默認行為的,例如a鏈接的單擊,表單的提交,都會進行跳轉或提交,這些我們成為默認行為
>
> 但是在綁定上事件后,**它首先會先執行事件,再去執行默認行為**,而有時我們只想讓其觸發事件,但不執行默認行為時,
>
> **我們可以在該元素的事件中 返回一個false來進行阻止默認行為**

```
<a href="http://www.baidu.com">百度</a>


$('a').click(function(){

    //阻止默認行為
    return false;
})
```

**獲得當前鼠標的位置和按鍵**

> 我們有鼠標和鍵盤按鍵的事件,在觸發事件時如果我們**想要獲取鼠標的位置或鍵盤按鍵信息時**,
>
> 首先需要在當前的事件中**傳遞一個 事件對象 e**vent

```
$(element).click(function(e){
    //能夠獲取鼠標的x軸和y軸坐標,坐標位置相對於瀏覽器窗口
    var x = e.clientX;
    var y = e.clientY;

    //能夠獲取鼠標的x軸和y軸坐標,坐標位置相對於文檔
    var _x = e.pageX;
    var _y = e.pageY;
})

$(element).keydown(function(e){
    //可以打印e對象,或者直接使用該對象中的keyCode屬性來獲取按鍵信息
    var key = e.keyCode;
    console.log(key);
})
```