1、鼠標事件
常見的click等事件這里不做詳細介紹
- 1、mousemove: 用來監(jiān)聽用戶移動的操作，基于移動的機制可以做出拖動助被、拖拽等一系列的效果出來。
下面寫一個監(jiān)聽鼠標移動的X位置的事件：
HTML
<style>
.content {
width: 300px;
height: 200px;
background: red;
}
</style>
<div class="test">
<div class="content">
<p>鼠標在紅色區(qū)域移動的事件</p>
<p>移動的X的位置：</p>
</div>
</div>
mousemove()方法
$('.content').mousemove(function(e){
$(this).find('p:last').html('移動的X的位置：'+e.pageX)
})
- 2切诀、mouseover與mouseout事件
jQuery當中提供了這樣兩個事件來監(jiān)聽用戶的移入移出操作
用法其實與上面的mousemove類似揩环，這里就不寫例子說明了，主要是為了總結(jié)鼠標常用的監(jiān)聽事件
2幅虑、表單事件
- 1丰滑、focus和blur事件
分別是對獲取焦點和失去焦點的監(jiān)聽，常用于表單的input標簽中
HTML
<div class="test">
點擊觸發(fā)焦點
<input type="text" value="hello">
</div>
focus和blur事件
let valText = $('.test input').val()
//獲取焦點的時候倒庵，清空input的值
$('.test input').focus(function(){
if(valText == 'hello') {
$(this).val('')
}
})
//失去焦點的時候input的占位值是'請輸入'
$('.test input').blur(function(){
$(this).val('請輸入')
})
- 2褒墨、change事件
input元素、textarea和select元素的值都可以發(fā)生改變擎宝，當前改變的時候郁妈，我們可以通過change事件去監(jiān)聽這個改變的動作。
input元素:
監(jiān)聽value值的變化绍申，當有改變時噩咪，失去焦點后觸發(fā)change事件。對于單選按鈕和復選框极阅，當用戶用鼠標做出選擇時胃碾，該事件立即觸發(fā)趣苏。
select元素:
對于下拉選擇框碍遍，當用戶用鼠標作出選擇時眶明，該事件立即觸發(fā)
textarea元素:
多行文本輸入框撑螺，當有改變時，失去焦點后觸發(fā)change事件
下面用一個例子說明：
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()是官方推薦的綁定事件的一個方法
基本用法：on(events,[selector],[data],handler(eventObject))
先可以看一個簡單的用法亡电，綁定一個點擊事件:
$('element').on('click',function(){
//do something
})
多個事件綁定同一個函數(shù)：
$('element').on("mouseover mouseout" ,function(){
//do something
})
多個事件綁定不同的函數(shù):
$('element').on({
mouseover:function(){},
mouseout:function(){}
})
on還有高級的用法就是實現(xiàn)事件委托疚顷，下面我們舉一個例子來說明
HTML
<div class="left">
<div class="content">
<a>點擊這里</a>
</div>
</div>
事件委托
//事件的綁定在最上層的body上髓迎，當用戶觸發(fā)a元素上峦朗，事件將向上冒泡，一直到body上竖般。
//但是但我們提供了第二個參數(shù)（這里是a）,那么事件在冒泡過程遇到選擇器匹配元素（a），就觸發(fā)回調(diào)函數(shù)的處理茶鹃。
$('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
總結(jié)一下上面的事件委托：
首先給body綁定一個click事件
其次沒有直接a元素綁定點擊事件
通過委托機制涣雕，點擊a元素的時候艰亮，事件觸發(fā)；點擊其他地方事件并不會被觸發(fā)
- 卸載事件off()方法
通過offIO方法移除該綁定
4挣郭、事件對象的使用
事件中的Event對象比較容易被我們所忽略迄埃，但有時候掌握它對我們也是很有用的
一個標準的'click'點擊事件:
$(elem).on("click",function(event){
event //事件對象
})
下面在來通過一個小例子來了解事件對象的作用
HTML
<ul>
<li class="even1"></li>
<li class="even2"></li>
<li class="even3"></li>
</ul>
上面的ul有3個子元素，若需要響應每一個li事件兑障，那么我們按照常規(guī)方法需要給所有的li都單獨綁定一個事件監(jiān)聽侄非，這樣就顯得很復雜。同時我們注意到所有的li都有一個共同的父元素流译，所有的事件都是一致的逞怨，那么我們可以用到on()綁定事件中的高級用法'事件委托'
事件沒直接和li元素發(fā)生關(guān)系，而且綁定父元素了福澡。由于瀏覽器有事件冒泡的這個特性叠赦，我們可以在觸發(fā)li的時候把這個事件往上冒泡到ul上，因為ul上綁定事件響應所以就能夠觸發(fā)這個動作了,那么我們需要如何才知道是觸發(fā)了哪一個li元素了革砸？
這里就可以引出事件對象了：
- 事件對象是用來記錄一些事件發(fā)生時的相關(guān)信息的對象除秀。事件對象只有事件發(fā)生時才會產(chǎn)生，并且只能是事件處理函數(shù)內(nèi)部訪問算利，在所有事件處理函數(shù)運行結(jié)束后册踩，事件對象就被銷毀
上面的定義說的有點復雜，簡單的我們需要記住事件的event.target這個屬性效拭，event.target代表當前觸發(fā)事件的元素暂吉，可以通過當前元素對象的一系列屬性來判斷是不是我們想要的元素
還是通過一段代碼例子來演示說明,這里的代碼就是上面拓展，大家運行以下就明白了event.target的用法：代碼
其實到了這里我們會發(fā)現(xiàn)這不是和this的功能有點像嗎允耿？其實this和event.target還是有區(qū)別的：js中事件是會冒泡的借笙，所以this是可以變化的，但event.target不會變化较锡，它永遠是直接接受事件的目標DOM元素业稼；
總結(jié)以下常用的事件對象的屬性和方法：
- event.type：獲取事件的類型
觸發(fā)元素的事件類型
$("element").click(function(event) {
alert(event.type); // "click"事件
});
- event.pageX 和 event.pageY：獲取鼠標當前相對于頁面的坐標
- event.preventDefault() 方法：阻止默認行為
這個用的很多,如點擊一個鏈接（a標簽），瀏覽器不會跳轉(zhuǎn)到新的 URL 去了蚂蕴。
$("a").click(function(event){
event.preventDefault();
});
- event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的低散，為防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)
完骡楼！
