jquery有哪些基礎事件方法-前端問答-PHP中文網

基礎事件方法：1、click()，設定滑鼠點選事件；2、dblclick()，設定滑鼠雙擊事件；3、change()，設定內容改變事件；4、focus()，設定觸發焦點事件；5、blur()，設定失去焦點事件；6、mousedown()等。

jquery有哪些基礎事件方法

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

事件方法觸發器或新增一個函數到被選元素的事件處理程序。

下面的表格列出了一些用於處理事件的 jQuery 方法。

click()dblclick()die()在版本1.9 中移除。 focus()focusin()#focusout()##將事件處理程序新增至focusout 事件hover()新增兩個事件處理程序到hover 事件新增/觸發keydown 事件新增/觸發keypress 事件 #新增/觸發keyup 事件#在版本1.9 中移除。 #新增/觸發mousedown 事件新增/觸發mouseenter 事件新增/觸發mouseleave 事件新增/觸發mousemove 事件新增/觸發mouseout 事件新增/觸發mouseover 事件新增/觸發mouseup事件移除透過on() 方法新增的事件處理程序為元素新增事件處理程序#新增一個或多個事件處理程序至被選元素。此處理程序只能被每個元素觸發一次規定當DOM 完全載入時要執行的函數在版本1.9 中移除。觸發綁定到被選元素的所有事件觸發綁定到被選元素的指定事件上的所有函數從被選元素上移除新增的事件處理程序從現在或未來的被選元素移除事件處理程式

方法

描述

#bind()

向元素新增事件處理程序

blur()

新增/觸發失去焦點事件

觸發change 事件

新增/觸發click 事件

#新增/觸發double click 事件

移除所有透過live() 方法新增的事件處理程序

新增/觸發focus 事件

加入事件處理程序到focusin 事件

##keydown()

keypress()

keyup()

live()

新增一個或多個事件處理程序到目前或未來的被選元素

mousedown()

mouseenter()

mouseleave()

mousemove()

mouseout()

mouseover()

mouseup()

off()

on()

one()

ready()

toggle()

新增click 事件之間要切換的兩個或多個函數

trigger()

triggerHandler()

unbind()

undelegate()

說明：

1、以上事件函數有三種用法：

//直接绑定事件到元素上
$(&#39;.target1&#39;).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即可。

    //回车键或者点击提交表单后禁止浏览器默认跳转：
    $(&#39;#target2&#39;).submit(function() {
        alert(&#39;捕获提交表达动作,阻止页面跳转&#39;)
        return false;
    });

登入後複製

4、on()使用

基本用法：.on( events ,[ selector ] ,[ data ] )

最常見的給元素綁定一個點擊事件，比較一下捷徑與on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on(&#39;click&#39;,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
}

登入後複製

#事件物件的屬性與方法

##.stopPropagation()取消事件冒泡

$("#content").click(function(event) {
   $("#msg").html("<p>外层div元素被单击</p>");
   event.stopPropagation();                         //通过event方法阻止事件冒泡  
});

登入後複製

【推薦學習：

#.type	事件類型.如果使用一個事件處理函數來處理多個事件, 可以使用此屬性獲得事件類型,例如click
.data	事件呼叫時傳入額外參數
.target	觸發該事件的DOM 元素
#.which	指示了哪一個鍵或按鈕
.timeStamp	#該屬性傳回從1970 年1 月1 日到事件發生時的毫秒數
.pageX/Y	#相對於文件左/上邊緣的滑鼠位置
.result	上一個相同事件處理器函數傳回的值
.preventDefalut()	阻止事件的預設動作