jQuery——事件篇( 滑鼠、表單、鍵盤、事件繫結和解綁、事件物件、自定義事件)

阿新 • • 發佈：2019-02-19

滑鼠事件

click()與dbclick()事件

<!--方法1-->
<div id="test">點選觸發<div>
$("ele").click(function(){
    alert('觸發指定事件')
})
$("#test").click(function(){
     $("ele").click()  //手動指定觸發事件 
});
<!--方法2-->
<div id="test">點選觸發<div>
$("#test").click(function() {
    //this指向 div元素
});
<!--方法3--> 

<div id="test">點選觸發<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 傳遞資料
});<!--????-->
<!--click事件在鬆手後才觸發
dblclick是由2個click疊加而來的-->

mousedown與mouseup事件

<!--方法1-->
<div id="test">點選觸發<div>
$("ele").mousedown(function(){
    alert('觸發指定事件')
})
$("#test").mousedown(function(){
     $("ele").mousedown()  //手動指定觸發事件 
});
<!--方法2--> 

<div id="test">點選觸發<div>
$("#test").mousedown(function() {
    //this指向 div元素
});
<!--方法3-->
<div id="test">點選觸發<div>
$("#test").mousedown(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 傳遞資料
});

<!--mousedown按住滑鼠，... 釋放滑鼠鍵
任何滑鼠按鈕被按下時都能觸發mousedown事件--> 

<!--mouseup強調是鬆手
-->
<!--用event 物件的which區別按鍵，敲擊滑鼠左鍵which的值是1，敲擊滑鼠中鍵which的值是2，敲擊滑鼠右鍵which的值是3-->

mousemove事件

<!--方法1-->
<div id="test">點選觸發<div>
$("ele").mousemove(function(){
    alert('觸發指定事件')
})
$("#test").click(function(){
     $("ele").mousemove()  //指定觸發事件 
});
<!--方法2-->
<div id="test">滑動觸發<div>
$("#test").mousemove(function() {
    //this指向 div元素 
});
<!--方法3-->
<div id="test">點選觸發<div>
$("#test").mousemove(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 傳遞資料
});
<!--mousemove事件是當滑鼠指標移動時觸發的
如果處理器做任何重大的處理，或者如果該事件存在多個處理函式，這可能造成瀏覽器的嚴重的效能問題-->

mouseover與mouseout\ mouseenter與mouseleave事件

mouseenter事件和mouseover的區別

關鍵點就是：冒泡的方式處理問題

<!--方法一-->
<div id="test">點選觸發<div>
$("ele").mouseover(function(){
    alert('觸發指定事件')
})
$("#test").click(function(){
     $("ele").mouseover()  //指定觸發事件 
});
<!--方法二：-->
<div id="test">滑動觸發<div>
$("#test").mouseover(function() {
    //this指向 div元素 
});
<!--方法三-->
<div id="test">點選觸發<div>
$("#test").mouseover(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 傳遞資料
});

hover事件

$(ele).mouseenter(function(){
     $(this).css("background", '#bbffaa');
 })
$(ele).mouseleave(function(){
    $(this).css("background", 'red');
})
||
$(selector).hover(handlerIn, handlerOut)

focusin事件

<!--方法一-->
<div id="test">點選觸發<div>
$("ele").focusin(function(){
    alert('觸發指定事件')
})
$("#test").mouseup(function(){
     $("ele").focusin()  //指定觸發事件 
});
<!--方法二-->
<div id="test">點選觸發<div>
$("#test").focusin(function() {
    //this指向 div元素
});
<!--方法三-->
<div id="test">點選觸發<div>
$("#test").focusin(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 傳遞資料
});

focusout事件

<!--方法一-->
<div id="test">點選觸發<div>
$("ele").focusout(function(){
    alert('觸發指定事件')
})
$("#test").mouseup(function(){
     $("ele").focusout()  //指定觸發事件 
});
<!--方法二-->
<div id="test">點選觸發<div>
$("#test").focusout(function() {
    //this指向 div元素
});
<!--方法三-->
<div id="test">點選觸發<div>
$("#test").focusout(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 傳遞資料
});

表單事件

blur與focus事件

<!--focus()在元素本身產生，focusin()在元素包含的元素中產生-->
<!-- butailiaojiela youdianmeikandong-->

change事件

input元素: 監聽value值的變化，當有改變時，失去焦點後觸發change事件。對於單選按鈕和複選框，當用戶用滑鼠做出選擇時，該事件立即觸發。
select元素: 對於下拉選擇框，當用戶用滑鼠作出選擇時，該事件立即觸發
textarea元素: 多行文字輸入框，當有改變時，失去焦點後觸發change事件

select事件

<!--方法一-->
$("input").select();
<!--方法二-->
<input id="test" value="文字選中"></input>
$("#test").select(function() { //響應文字選中回撥
    //this指向 input元素 
});
<!--方法三-->
<input id="test" value="文字選中"></input>
$("#test").select(11111,function(e) {//響應文字選中回撥
    //this指向 div元素 
   //e.date  => 11111 傳遞資料
});

submit事件

<!--方法一-->
<div id="test">點選觸發<div>
$("ele").submit(function(){
    alert('觸發指定事件')
})
$("#text").click(function(){
     $("ele").submit()  //指定觸發事件 
});
<!--方法二-->
<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(function() { //繫結提交表單觸發
    //this指向 from元素 
});
<!--方法三-->
<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //繫結提交表單觸發
    //data => 1111 //傳遞的data資料
});
<!--form元素是有預設提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個預設行為
-->
<script>
$("#target").submit(function(data) { 
   return false; //阻止預設行為，提交表單
});
</script>

鍵盤事件

keydown()與keyup()事件\keypress()事件

//直接繫結事件
$elem.keydown( handler(eventObject) )
//傳遞引數
$elem.keydown( [eventData ], handler(eventObject) )
//手動觸發已繫結的事件
$elem.keydown()
<!--keypress事件與keydown和keyup的主要區別
只能捕獲單個字元，不能捕獲組合鍵
無法響應系統功能鍵（如delete，backspace）
不區分小鍵盤和主鍵盤的數字字元
總而言之，
KeyPress主要用來接收字母、數字等ANSI字元，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。-->

事件繫結和解綁

on()

基本用法：.on( events ,[ selector ] ,[ data ] )
$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式
//最大的不同點就是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()的高階用法

.on( events ,[ selector ] ,[ data ], handler(eventObject) )
$("div").on("click","p",fn)
//事件繫結在最上層div元素上，當用戶觸發在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二引數，那麼事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發事件回撥函式

解除安裝事件off()方法

//通過.on()繫結的事件處理程式
//通過off() 方法移除該繫結
//繫結2個事件
$("elem").on("mousedown mouseup",fn)

//刪除一個事件
$("elem").off("mousedown")

//刪除所有事件
$("elem").off("mousedown mouseup")

//快捷方式刪除所有事件，這裡不需要傳遞事件名了，節點上繫結的所有事件講全部銷燬
$("elem").off()

事件物件

//事件物件是用來記錄一些事件發生時的相關資訊的物件。事件物件只有事件發生時才會產生，並且只能是事件處理函式內部訪問，在所有事件處理函式執行結束後，事件物件就被銷燬
//event.target代表當前觸發事件的元素，可以通過當前元素物件的一系列屬性來判斷是不是我們想要的元素
<script type="text/javascript">
        //多事件繫結一
$("ul").on('click',function(e)
{
    alert('觸發的元素是內容是: ' + e.target.textContent)
})
</script>

屬性和方法

<!--event.type：獲取事件的型別-->
$("a").click(function(event) {
  alert(event.type); // "click"事件
});
<!--event.pageX 和 event.pageY：獲取滑鼠當前相對於頁面的座標-->
    確定元素在當前頁面的座標值，滑鼠相對於文件的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化

<!--event.preventDefault() 方法：阻止預設行為-->瀏覽器不會跳轉到新的 URL 去了

<!--event.stopPropagation() 方法：阻止事件冒泡-->事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函式

<!--event.which：獲取在滑鼠單擊時，單擊的是滑鼠的哪個鍵-->左鍵報告1，中間鍵報告2，右鍵報告3

<!--event.currentTarget : 在事件冒泡過程中的當前DOM元素-->冒泡前的當前觸發事件的DOM物件, 等同於this

<!--this和event.target的區別-->
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素

<!--.this和event.target都是dom物件-->如果要使用jquey中的方法可以將他們轉換為jquery物件。比如this和$(this)的使用、event.target和$(event.target)的使用

自定義事件

trigger事件

$('#elem').on('click', function() {
    alert("觸發系統事件")
 });
必須有使用者點選才可以。如果不同使用者互動是否能在某一時刻自動觸發該事件呢
$('#elem').trigger('click');
簡單來講就是：根據繫結到匹配元素的給定的事件型別執行所有的處理程式和行為
trigger除了能夠觸發瀏覽器事件，同時還支援自定義事件，並且自定義時間還支援傳遞引數
$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自觸自定義時間")
 });
$('#elem').trigger('Aaron',['引數1','引數2'])

triggerHandler事件

jQuery自定義事件之triggerHandler事件
trigger事件還有一個特性：會在DOM樹上冒泡，所以如果要阻止冒泡就需要在事件處理程式中返回false或呼叫事件物件中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有觸發原生與自定義能力的，但是存在一個不可避免的問題：事件物件event無法完美的實現，畢竟一個是瀏覽器給的，一個是自己模擬的。儘管 .trigger() 模擬事件物件，但是它並沒有完美的複製自然發生的事件，若要觸發通過 jQuery 繫結的事件處理函式，而不觸發原生的事件，使用.triggerHandler() 來代替

triggerHandler與trigger的用法是一樣的，重點看不同之處：

triggerHandler不會觸發瀏覽器的預設行為，.triggerHandler( “submit” )將不會呼叫表單上的.submit()
.trigger() 會影響所有與 jQuery 物件相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素
使用 .triggerHandler() 觸發的事件，並不會在 DOM 樹中向上冒泡。如果它們不是由目標元素直接觸發的，那麼它就不會進行任何處理
與普通的方法返回 jQuery 物件(這樣就能夠使用鏈式用法)相反，.triggerHandler() 返回最後一個處理的事件的返回值。如果沒有觸發任何事件，會返回 undefined