1.click與dbclick事件
$("ele").click() //手動指定觸發事件 <div id="test">點擊觸發<div>
$("#text").click(function() {
//this指向 div元素
});<div id="test">點擊觸發<div>
$("#text").click(11111,function(e) {
//this指向 div元素
//e.date => 11111 傳遞數據
});
2.mousedown與mouseup事件
方法同上
mousedown事件觸發需要以下幾點：
mousedown強調是按下觸發
如果在一個元素按住了鼠標不放，並且拖動鼠標離開這個元素，並釋放鼠標鍵，這仍然是算作mousedown事件
任何鼠標按鈕被按下時都能觸發mousedown事件
用event 對象的which區別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3
click事件其實是由mousedown於mouseup 2個動作構成，所以點擊的動作只有在鬆手後才觸發
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})方法同1
mousemove事件是當鼠標指針移動時觸發的，即使是一個像素
如果處理器做任何重大的處理，或者如果該事件存在多個處理函數，這可能造成瀏覽器的嚴重的性能問題
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移動的X位置：' + e.pageX)
})方法同1
</pre><pre name="code" class="html">var n = 0;
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('進入元素內部,mouseover事件觸發次數：' + (++n))
})var n = 0;
//不同函數傳遞數據
function data(e) {
$(".right a").html('mouseover事件觸發次數：' + (++n) + '<br/> 傳入數據爲 ：'+ e.data)
}
function a() {
$(".right p:first").mouseover('data = 慕課網', data)
}
a();mouseenter事件和mouseover的區別
關鍵點就是：冒泡的方式處理問題
mouseover爲例：
<div class="aaron2">
<p>鼠標離開此區域觸發mouseleave事件</p>
</div>p元素響應事件
div元素響應事件
這裏的問題是div爲什麼會被觸發？ 原因就是事件冒泡的問題，p元素觸發了mouseover，他會一直往上找父元素上的mouseover事件，如果有全觸發了
mouseenter事件只會在綁定它的元素上被調用，而不會在後代節點上被觸發
所以在這種情況下面，jQuery推薦我們使用 mouseenter事件
6.hover事件
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：當鼠標指針進入元素時觸發執行的事件函數
handlerOut(eventObject)：當鼠標指針離開元素時觸發執行的事件函數
7.focusin事件
元素或者其內部任何一個元素獲得焦點的時候觸發
方法同1
8.focusout事件
當一個元素，或者其內部任何一個元素失去焦點的時候觸發
方法同1
9.blur與focus事件
focus()在元素本身產生，focusin()在元素包含的元素中產生
blur與focusout也亦是如此
10.change事件
input元素
</pre><p>監聽value值的變化，當有改變時，<span style="color:#ff0000;">失去焦點後</span>觸發change事件</p><p> select元素</p><p>對於下拉選擇框，複選框和單選按鈕，當用戶用鼠標作出選擇，該事件立即觸發</p><p> textarea元素</p><p>多行文本輸入框，當用戶用鼠標點擊時，該事件立即觸發</p><p><strong>11.select事件</strong></p><p>當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件。</p><p>方法同1</p><pre name="code" class="javascript"> $('textarea').select(function(e) {
alert(e.target.value);
});有時候開發者需要在表單提交的時候過濾一些的數據、做一些必要的操作（例如：驗證表單輸入的正確性，如果錯誤就阻止提交，從新輸入）此時可以通過submit事件，監聽下提交表單的這個動作
能觸發submit事件的行爲：
<input type="submit">
<input type="image">
<button type="submit">
當某些表單元素獲取焦點時，敲擊Enter（回車鍵）
特別注意：
form元素是有默認提交表單的行爲，如果通過submit處理的話，需要禁止瀏覽器的這個默認行爲
傳統的方式是調用事件對象 e.preventDefault() 來處理， jQuery中可以直接在函數中最後結尾return false即可
jQuery處理如下：
$("#target").submit(function(data) {
return false; //阻止默認行爲，提交表單
}); $('#target1').submit(function(e) {
alert('捕獲提交表達動作,不阻止頁面跳轉')
});
//回車鍵或者點擊提交表單,禁止瀏覽器默認跳轉：
$('#target2').submit(function() {
alert('捕獲提交表達動作,阻止頁面跳轉')
return false;
});keydown事件：
當用戶在一個元素上第一次按下鍵盤上字母鍵的時候，就會觸發它
方法：
//直接綁定事件
$elem.keydown( handler(eventObject) )
//傳遞參數
$elem.keydown( [eventData ], handler(eventObject) )
//手動觸發已綁定的事件
$elem.keydown()keyup事件：
當用戶在一個元素上第一次鬆手鍵盤上的鍵的時候，就會觸發它。使用方法與keydown是一致的
理論上它可以綁定到任何元素，但keydown/keyup事件只是發送到具有焦點的元素上，不同的瀏覽器中，可獲得焦點的元素略有不同，但是表單元素總是能獲取焦點，所以對於此事件類型表單元素是最合適的。
$('.target1').keydown(function(e) {
$("em:first").text(e.target.value)
});
$('.target2').keyup(function(e) {
$("em:last").text(e.target.value)
});14.keypress()事件
keypress 事件與 keydown 事件類似。當按鈕被按下時，會發生該事件。它發生在當前獲得焦點的元素上。
keypress事件與keydown和keyup的主要區別
keypress：
對中文輸入法支持不好，無法響應中文輸入
無法響應系統功能鍵（如delete，backspace）
keydown與keypress區別
雖然從字面理解, KeyDown是按下一個鍵的意思, 但實際上二者的根本區別是, 系統由KeyDown返回鍵盤的代碼, 然後由TranslateMessage函數翻譯成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是鍵盤的代碼, 而KeyPress返回的是ASCII字符. 所以根據你的目的, 如果只想讀取字符, 用KeyPress, 如果想讀各鍵的狀態, 用KeyDown.
總之，KeyPress主要用來接收字母、數字等ANSI字符，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。
15.on()的多事件綁定
官方推薦的綁定事件的一個方法。
基本用法：.on( events [, selector ] [, data ] )
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式多個事件綁定同一個函數
$("#elem").on("mouseover mouseout",function(){ });多個事件綁定不同函數
$("#elem").on({
mouseover:function(){},
mouseout:function(){},
});function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕課網
}
$( "button" ).on( "click", {
name: "慕課網"
}, greet );委託機制
.on( events [, selector ] [, data ], handler(eventObject) )<div class="left">
<p class="aaron">
<a>目標節點</a> //點擊在這個元素上
</p>
</div>$("div").on("click","p",fn)16.卸載事件off()方法
通過off() 方法移除綁定的事件
$("elem").off("mousedown mouseup")$("elem").off()17.jQuery事件對象
事件對象是用來記錄一些事件發生時的相關信息的對象。事件對象只有事件發生時纔會產生，並且只能是事件處理函數內部訪問，在所有事件處理函數運行結束後，事件對象就被銷燬
event.target代表當前觸發事件的元素，可以通過當前元素對象的一系列屬性來判斷是不是我們想要的元素
<ul>
<li>點擊：觸發一</li>
<li>點擊：觸發二</li>
<li>點擊：觸發三</li>
<li>點擊：觸發四</li>
</ul>
<script type="text/javascript">
//多事件綁定一
$("ul").on('click',function(e){
alert('觸發的元素是內容是: ' + e.target.textContent)
})
</script>jQuery事件對象的屬性和方法
event.type：獲取事件的類型
觸發元素的事件類型
event.pageX 和 event.pageY：獲取鼠標當前相對於頁面的座標
鼠標相對於文檔的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上角開始,即是以頁面爲參考點,不隨滑動條移動而變化
event.preventDefault() 方法：阻止默認行爲
這個用的特別多，在執行這個方法後，如果點擊一個鏈接（a標籤），瀏覽器不會跳轉到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件對象上)被調用過了
event.stopPropagation() 方法：阻止事件冒泡
事件是可以冒泡的，爲防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數
event.which：獲取在鼠標單擊時，單擊的是鼠標的哪個鍵
event.which 將 event.keyCode 和 event.charCode 標準化了。event.which也將正常化的按鈕按下(mousedown 和 mouseupevents)，左鍵報告1，中間鍵報告2，右鍵報告3
event.currentTarget : 在事件冒泡過程中的當前DOM元素
冒泡前的當前觸發事件的DOM對象, 等同於this.
this和event.target的區別：
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；
.this和event.target都是dom對象
如果要使用jquey中的方法可以將他們轉換，爲jquery對象：$(this)和$(event.target);比如：event.target和$(event.target)的使用：
<body>
<h3>事件對象的屬性與方法</h3>
<div class="left">
<div id="content">
外層div元素
<br />
<span style="background: silver;">內層span元素</span>
<br /> 外層div元素
</div>
<br />
<div id="msg"></div>
</div>
<script type="text/javascript">
//爲 <span> 元素綁定 click 事件
$("span").click(function() {
$("#msg").html($("#msg").html() + "<p>內層span元素被單擊</p>");
});
//爲 Id 爲 content 的 <div> 元素綁定 click 事件
$("#content").click(function(event) {
$("#msg").html($("#msg").html() + "<p>外層div元素被單擊</p>");
event.stopPropagation(); //阻止事件冒泡
});
//爲 <body> 元素綁定 click 事件
$("body").click(function() {
$("#msg").html($("#msg").html() + "<p>body元素被單擊</p>");
});
</script>
</body>18.trigger事件
trigger方法來觸發瀏覽器事件
trigger事件會在DOM樹上冒泡
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert("自觸自定義時間")
});
$('#elem').trigger('Aaron',['參數1','參數2'])<body>
<h2>自定義事件trigger</h2>
<div class="left">
<div><span></span><span>0</span>點擊次數</div>
<button>直接點擊</button>
<button>通過自定義點擊</button>
</div>
<script type="text/javascript">
//點擊更新次數
$("button:first").click(function(event,bottonName) {
bottonName = bottonName || 'first';
update($("span:first"),$("span:last"),bottonName);
});
//通過自定義事件調用，更新次數
$("button:last").click(function() {
$("button:first").trigger('click','last');
});
function update(first,last,bottonName) {
first.text(bottonName);
var n = parseInt(last.text(), 10);
last.text(n + 1);
}
</script>
</body>19.triggerHandler事件
若要觸發通過 jQuery 綁定的事件處理函數，而不觸發原生的事件，使用.triggerHandler() 來代替
儘管 .trigger() 模擬事件對象，但是它並沒有完美的複製自然發生的事件triggerHandler與trigger的用法是一樣的，重點看不同之處：
triggerHandler不會觸發瀏覽器的默認行爲，.triggerHandler( "submit" )將不會調用表單上的.submit()
.trigger() 會影響所有與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素
使用 .triggerHandler() 觸發的事件，並不會在 DOM 樹中向上冒泡。 如果它們不是由目標元素直接觸發的，那麼它就不會進行任何處理
與普通的方法返回 jQuery 對象(這樣就能夠使用鏈式用法)相反，.triggerHandler() 返回最後一個處理的事件的返回值。如果沒有觸發任何事件，會返回 undefined
<body>
<h2>自定義事件triggerHandler</h2>
<div class="left">
<div>
<input type="text" value="" />
</div>
<button>trigger聚焦觸發瀏覽器事件</button>
<button>triggerHandler聚焦沒有觸發瀏覽器事件</button>
</div>
<script type="text/javascript">
//給input綁定一個聚焦事件
$("input").on("focus",function(event,titie) {
$(this).val('聚焦')
});
//trigger觸發focus
$("button:first").click(function() {
$("input").trigger("focus",['觸發默認事件']);
});
//triggerHandler觸發focus
$("button:last").click(function() {
$("input").triggerHandler("focus",'沒有觸發默認事件');
});
</script>
</body>
