基礎事件方法:1、click(),設定滑鼠單擊事件;2、dblclick(),設定滑鼠雙擊事件;3、change(),設定內容改變事件;4、focus(),設定觸發焦點事件;5、blur(),設定失去焦點事件;6、mousedown()等。
本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。
事件方法觸發器或新增一個函數到被選元素的事件處理程式。
下面的表格列出了一些用於處理事件的 jQuery 方法。
方法 | 描述 |
---|---|
bind() | 向元素新增事件處理程式 |
blur() | 新增/觸發失去焦點事件 |
change() | 新增/觸發 change 事件 |
click() | 新增/觸發 click 事件 |
dblclick() | 新增/觸發 double click 事件 |
die() | 在版本 1.9 中被移除。移除所有通過 live() 方法新增的事件處理程式 |
focus() | 新增/觸發 focus 事件 |
focusin() | 新增事件處理程式到 focusin 事件 |
focusout() | 新增事件處理程式到 focusout 事件 |
hover() | 新增兩個事件處理程式到 hover 事件 |
keydown() | 新增/觸發 keydown 事件 |
keypress() | 新增/觸發 keypress 事件 |
keyup() | 新增/觸發 keyup 事件 |
live() | 在版本 1.9 中被移除。新增一個或多個事件處理程式到當前或未來的被選元素 |
mousedown() | 新增/觸發 mousedown 事件 |
mouseenter() | 新增/觸發 mouseenter 事件 |
mouseleave() | 新增/觸發 mouseleave 事件 |
mousemove() | 新增/觸發 mousemove 事件 |
mouseout() | 新增/觸發 mouseout 事件 |
mouseover() | 新增/觸發 mouseover 事件 |
mouseup() | 新增/觸發 mouseup 事件 |
off() | 移除通過 on() 方法新增的事件處理程式 |
on() | 向元素新增事件處理程式 |
one() | 向被選元素新增一個或多個事件處理程式。該處理程式只能被每個元素觸發一次 |
ready() | 規定當 DOM 完全載入時要執行的函數 |
toggle() | 在版本 1.9 中被移除。新增 click 事件之間要切換的兩個或多個函數 |
trigger() | 觸發繫結到被選元素的所有事件 |
triggerHandler() | 觸發繫結到被選元素的指定事件上的所有函數 |
unbind() | 從被選元素上移除新增的事件處理程式 |
undelegate() | 從現在或未來的被選元素上移除事件處理程式 |
1、以上事件函數有三種用法:
//直接繫結事件到元素上 $('.target1').keydown(function(e) { $("em:first").text(e.target.value) //通過物件e獲取輸入的值 }); //傳遞引數呼叫函數處理 $("#test").click(11111,function(e) { //this指向 div元素 //e.data => 11111 通過e傳遞引數資料 }); //手動觸發已係結的點選事件 $elem.click()
2、mouseover與mouseenter區別:不論滑鼠指標穿過被選元素或其子元素,都會觸發 mouseover 事件,稱作支援冒泡處理,冒泡處理指子元素與父元素共同定義的事件,在觸發子元素時,或者沒有定義子元素,事件就會向父級傳播,引發父級事件觸發。只有在滑鼠指標穿過被選元素時,才會觸發 mouseenter 事件。
3、form元素是有預設提交表單的行為,如果通過submit處理的話,需要禁止瀏覽器的這個預設行為。傳統的方式是呼叫事件物件 e.preventDefault() 來處理, jQuery中可以直接在函數中最後結尾return false即可。
//確認鍵或者點選提交表單後禁止瀏覽器預設跳轉: $('#target2').submit(function() { alert('捕獲提交表達動作,阻止頁面跳轉') return false; });
4、on()使用
基本用法:.on( events ,[ selector ] ,[ data ] )
最常見的給元素繫結一個點選事件,對比一下快捷方式與on方式的不同
$("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式 //多個事件繫結同一個函數,通過空格分離,傳遞不同的事件名,可以同時繫結多個事件 $("#elem").on("mouseover mouseout",function(){ }); //多個事件繫結不同函數 $("#elem").on({ mouseover:function(){}, mouseout:function(){} }); //將資料傳遞到處理程式 $( "button" ).on( "click", { //第二個引數傳遞資料給函數呼叫 name: "Mr.Tory" }, greet ); function greet( event ) { alert( "Hello " + event.data.name ); //輸出Hello Mr.Tory }
.type | 事件型別.如果使用一個事件處理常式來處理多個事件, 可以使用此屬性獲得事件型別,比如click |
.data | 事件呼叫時傳入額外引數 |
.target | 觸發該事件的 DOM 元素 |
.which | 指示按了哪個鍵或按鈕 |
.timeStamp | 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數 |
.pageX/Y | 相對於檔案左/上邊緣的滑鼠位置 |
.result | 上一個相同事件處理器函數返回的值 |
.preventDefalut() | 阻止事件的預設動作 |
.stopPropagation() | 取消事件冒泡 |
$("#content").click(function(event) { $("#msg").html("<p>外層div元素被單擊</p>"); event.stopPropagation(); //通過event方法阻止事件冒泡 });
【推薦學習:、】
以上就是jquery有哪些基礎事件方法的詳細內容,更多請關注TW511.COM其它相關文章!