1、鼠標(biāo)事件

常見的click等事件這里不做詳細(xì)介紹

• 1、mousemove: 用來監(jiān)聽用戶移動(dòng)的操作，基于移動(dòng)的機(jī)制可以做出拖動(dòng)、拖拽等一系列的效果出來。
  下面寫一個(gè)監(jiān)聽鼠標(biāo)移動(dòng)的X位置的事件：
  HTML

<style>
    .content {
      width: 300px;
      height: 200px;
      background: red;
    }
  </style>

  <div class="test">
    <div class="content">
      <p>鼠標(biāo)在紅色區(qū)域移動(dòng)的事件</p>
      <p>移動(dòng)的X的位置：</p>
    </div>
  </div>

mousemove()方法

$('.content').mousemove(function(e){
      $(this).find('p:last').html('移動(dòng)的X的位置：'+e.pageX)
})

• 2、mouseover與mouseout事件
  jQuery當(dāng)中提供了這樣兩個(gè)事件來監(jiān)聽用戶的移入移出操作
  用法其實(shí)與上面的mousemove類似，這里就不寫例子說明了，主要是為了總結(jié)鼠標(biāo)常用的監(jiān)聽事件

2、表單事件

• 1、focus和blur事件
  分別是對(duì)獲取焦點(diǎn)和失去焦點(diǎn)的監(jiān)聽，常用于表單的input標(biāo)簽中
  HTML

<div class="test">
    點(diǎn)擊觸發(fā)焦點(diǎn)
    <input type="text" value="hello">
  </div>

focus和blur事件

    let valText = $('.test input').val()
    //獲取焦點(diǎn)的時(shí)候，清空input的值
    $('.test input').focus(function(){
      if(valText == 'hello') {
        $(this).val('')
      }
    })
    
    //失去焦點(diǎn)的時(shí)候input的占位值是'請(qǐng)輸入'
    $('.test input').blur(function(){
      $(this).val('請(qǐng)輸入')
    })

• 2、change事件
  input元素、textarea和select元素的值都可以發(fā)生改變，當(dāng)前改變的時(shí)候，我們可以通過change事件去監(jiān)聽這個(gè)改變的動(dòng)作。

input元素:

監(jiān)聽value值的變化，當(dāng)有改變時(shí)，失去焦點(diǎn)后觸發(fā)change事件。對(duì)于單選按鈕和復(fù)選框，當(dāng)用戶用鼠標(biāo)做出選擇時(shí)，該事件立即觸發(fā)。

select元素:

對(duì)于下拉選擇框，當(dāng)用戶用鼠標(biāo)作出選擇時(shí)，該事件立即觸發(fā)

textarea元素:

多行文本輸入框，當(dāng)有改變時(shí)，失去焦點(diǎn)后觸發(fā)change事件

下面用一個(gè)例子說明：
HTML

    <div class="left">
        <div class="aaron1">input：
            <input class="target1" type="text" value="監(jiān)聽input的改變" />
        </div>
        <div class="aaron2">select：
            <select class="target2">
                <option value="option1" selected="selected">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
        <div class="aaron3">textarea：
            <textarea class="target2" rows="3" cols="20">多行的文本輸入控件</textarea>
        </div>
    </div>
    <p>輸出結(jié)果：</p>
    <div id="result"></div>

jQuery的change事件

//監(jiān)聽input值的改變
$('.target1').change(function(e) {
        $("#result").html(e.target.value)
});
//監(jiān)聽select
$('.target2').change(function(e) {
        $("#result").html(e.target.value)
});
//監(jiān)聽textarea
$('.target3').change(function(e) {
        $("#result").html(e.target.value)
});

代碼演示

3、事件的綁定和解綁

jQuery on()是官方推薦的綁定事件的一個(gè)方法

基本用法：on(events,[selector],[data],handler(eventObject))
先可以看一個(gè)簡(jiǎn)單的用法，綁定一個(gè)點(diǎn)擊事件:

$('element').on('click',function(){
   //do something
})

多個(gè)事件綁定同一個(gè)函數(shù)：

$('element').on("mouseover mouseout" ,function(){
    //do something
})

多個(gè)事件綁定不同的函數(shù):

$('element').on({
  mouseover:function(){},
  mouseout:function(){}
})

on還有高級(jí)的用法就是實(shí)現(xiàn)事件委托，下面我們舉一個(gè)例子來說明
HTML

<div class="left">
  <div class="content">
     <a>點(diǎn)擊這里</a>
  </div>
</div>

事件委托

//事件的綁定在最上層的body上，當(dāng)用戶觸發(fā)a元素上，事件將向上冒泡，一直到body上。
//但是但我們提供了第二個(gè)參數(shù)（這里是a）,那么事件在冒泡過程遇到選擇器匹配元素（a），就觸發(fā)回調(diào)函數(shù)的處理。
$('body').on('click', 'a', function(e) {
       alert(e.target.textContent)
    })

總結(jié)一下上面的事件委托：
首先給body綁定一個(gè)click事件
其次沒有直接a元素綁定點(diǎn)擊事件
通過委托機(jī)制，點(diǎn)擊a元素的時(shí)候，事件觸發(fā)；點(diǎn)擊其他地方事件并不會(huì)被觸發(fā)

代碼演示

• 卸載事件off()方法
  通過offIO方法移除該綁定

4、事件對(duì)象的使用

事件中的Event對(duì)象比較容易被我們所忽略，但有時(shí)候掌握它對(duì)我們也是很有用的
一個(gè)標(biāo)準(zhǔn)的'click'點(diǎn)擊事件:

$(elem).on("click",function(event){
   event //事件對(duì)象
})

下面在來通過一個(gè)小例子來了解事件對(duì)象的作用
HTML

<ul>
    <li class="even1"></li>
    <li class="even2"></li>
    <li class="even3"></li>
</ul>

上面的ul有3個(gè)子元素，若需要響應(yīng)每一個(gè)li事件，那么我們按照常規(guī)方法需要給所有的li都單獨(dú)綁定一個(gè)事件監(jiān)聽，這樣就顯得很復(fù)雜。同時(shí)我們注意到所有的li都有一個(gè)共同的父元素，所有的事件都是一致的，那么我們可以用到on()綁定事件中的高級(jí)用法'事件委托'

事件沒直接和li元素發(fā)生關(guān)系，而且綁定父元素了。由于瀏覽器有事件冒泡的這個(gè)特性，我們可以在觸發(fā)li的時(shí)候把這個(gè)事件往上冒泡到ul上，因?yàn)閡l上綁定事件響應(yīng)所以就能夠觸發(fā)這個(gè)動(dòng)作了,那么我們需要如何才知道是觸發(fā)了哪一個(gè)li元素了？

這里就可以引出事件對(duì)象了：

• 事件對(duì)象是用來記錄一些事件發(fā)生時(shí)的相關(guān)信息的對(duì)象。事件對(duì)象只有事件發(fā)生時(shí)才會(huì)產(chǎn)生，并且只能是事件處理函數(shù)內(nèi)部訪問，在所有事件處理函數(shù)運(yùn)行結(jié)束后，事件對(duì)象就被銷毀

上面的定義說的有點(diǎn)復(fù)雜，簡(jiǎn)單的我們需要記住事件的event.target這個(gè)屬性，event.target代表當(dāng)前觸發(fā)事件的元素，可以通過當(dāng)前元素對(duì)象的一系列屬性來判斷是不是我們想要的元素

還是通過一段代碼例子來演示說明,這里的代碼就是上面拓展，大家運(yùn)行以下就明白了event.target的用法：代碼

其實(shí)到了這里我們會(huì)發(fā)現(xiàn)這不是和this的功能有點(diǎn)像嗎？其實(shí)this和event.target還是有區(qū)別的：js中事件是會(huì)冒泡的，所以this是可以變化的，但event.target不會(huì)變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；

總結(jié)以下常用的事件對(duì)象的屬性和方法：

• event.type：獲取事件的類型
  觸發(fā)元素的事件類型

$("element").click(function(event) {
      alert(event.type); // "click"事件
});

• event.pageX 和 event.pageY：獲取鼠標(biāo)當(dāng)前相對(duì)于頁面的坐標(biāo)
• event.preventDefault() 方法：阻止默認(rèn)行為
  這個(gè)用的很多,如點(diǎn)擊一個(gè)鏈接（a標(biāo)簽），瀏覽器不會(huì)跳轉(zhuǎn)到新的 URL 去了。

$("a").click(function(event){
    event.preventDefault();
});

• event.stopPropagation() 方法：阻止事件冒泡
  事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)

完！