jQuery中的事件

1.載入DOM

在頁面載入完畢後，JS用window.onload為DOM元素新增事件，jQuery中，用$(document).ready()為DOM元素新增事件，使用該方法可以在DOM載入就緒時對其進行操作並呼叫執行它所綁定的函數。

                                         中下對中.onload#$(docum {}

$(document).ready(function(){})#執行機制必須等到網頁中的所有內容載入完畢後（包括圖片）網頁中所有DOM結構繪製完畢後就執行，可能DOM元素關聯的東西並沒有載入完寫個數不能同時寫多個可以同時寫多個簡化寫法無$(document)可以簡寫為$(),不帶參數時預設為document，因此可簡寫為：大幅提升了Web應用程式的對應速度缺點元素的關聯檔案未下載完，造成某些屬性的無效解決方法使用另一個關於頁面載入的方法－load()方法

 

 

 

 

 

 

 

# 

# 

 

 

補充：load()方法會在元素的onload事件中綁定一個處理函數，如果處理函數綁定給window對象，則會在所有內容（包括視窗、框架、物件和圖像等）載入完畢後觸發，如果處理函數綁定在元素上，會在元素的內容載入完畢後觸發。

1 $(window).load(function(){2 //编写代码3 })

 

2.事件綁定— —bind()方法

格式：bind(type [, data] , fn )

第一個參數是事件類型：blur、focus、load、unload、resize、scroll、click、dblclick、mousedown、mouseover、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit 、keydown、keypress、keyup、error

第二個參數是可選參數，作為evert.data屬性值傳遞給事件物件的額外資料物件

第三個餐點是用來綁定的處理函數

補充：判斷一個元素是否顯示，jQuery中用is()方法

簡寫： .mouseover(function(){})

bind()方法其他用法：

（1）為一個元素一次綁定多個事件類型

 
$("p").bind("mouseover mouseout",
function
(){};);

#（2）新增事件命名空間，以便管理

 

3.合成事件

hover()方法：模擬遊標懸停事件

格式：hover(enter , leave) ;

當遊標移到元素上時，會觸發指定的第一個函數，當遊標移除這個元素時，會觸發指定的第2個函數

替代事件：bind("mouseenter")和bind("mouseleave")

 

toggle()方法：模擬滑鼠的連續點選事件

格式：toggle(fn1,fn3......fnN);

##

$(function()){
      $("#panel").toggle(function(){
               $(this).next().show();
       },function(){
                $(this).next().hide();
       })
})

補充toggle還有另一個功能：切換元素的可見狀態。如果元素課件，點選後切換為隱藏。如果元素是隱藏的，點擊切換後為可見

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

 

4.事件冒泡

 冒泡：嵌套元素對應同一個事件的執行順序，事件依照DOM的層次結構向上直到頂端

事件冒泡引發的問題：

（1）事件物件：event

建立事件物件只需為事件處理函數新增一個參數event，對元素執行事件時，事件物件就被建立了，這個物件只有事件處理函數才能存取到，事件處理函式執行完畢後，事件物件就被銷毀

（2）停止事件冒泡：event.stopPropagation()方法

（3）阻止預設行為：event.preventDefault()方法

範例：表單驗證不符合提交條件時阻止表單的提交（預設行為）

$(function(){
      $("#sub").bind("click",function(event){
              var username=$("#username").val();
              if(username==""){
                     $(""#msg).html("<p>文本框内容不能为空</p>")；
                     event.preventDefault();
              }
        })
})

 

如果想同時對事件物件停止冒泡和預設行為，可在事件處理函數中回傳false

 

5.事件擷取

#事件擷取與事件冒泡是想法的過程，事件擷取是從頂端往下開始觸發 

#並非所有的瀏覽器都支援事件捕獲，jQuery也不支援

 

#6.事件物件的屬性

①$(document).ready(function(){})	#②$(function (){})	對比

##屬性和方法event.typeevent.preventDefault( )event.stopPropagation()event.targetevent.relatedTargetevent.pageX和event.pageY##取得到光不熬相對於頁面的x和y座標 #event.which在滑鼠事件中取得滑鼠的左、中、右鍵;在鍵盤事件中取得鍵盤的按鍵event.metaKey在鍵盤事件中取得鍵#

补充：（1）JS中的stopPropagation()方法不兼容IE浏览器

（2）在标准DOM中，mouseover和mouseout所发生的元素都可以通过event.target访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement，在mouseout中相当于IE的event.toElement。

（3）在JS中，IE用event.x和event.y；Firefox用event.pageX/event.pageY。如果页面有滚动条，还要加上滚动条的宽度和高度。

6.移除事件

（1）移除按钮元素上已有的事件：$("#btn").unbind();

格式：unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数

①如果没有参数，删除所有绑定的事件。

②有参数只删除参数类型的绑定事件。

③如果把在绑定时传递的处理函数作为第二个参数，只有特定的事件处理函数会被删除。

（2）移除元素中的其中一个事件

在绑定时要给匿名函数指定一个变量

$(function(){
      $("#btn").bind("click",myFun1=function(){
           //代码1
      }).bind("click",myFun1=function(){
           //代码2
      }）
})

单独移除某个绑定事件

$("#del1").click(function(){
      $("#btn").unbind("click",myFun2);
 })

注意：对于只需要触发一次就要立即解除绑定的情况，使用one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即：在每个对象上，事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。

 

作用
取得事件的類型
阻止預設的事件行為
阻止事件冒泡
取得觸發事件的元素
傳回目前事件所涉及的其他DOM元素

以上是jQuery中的事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！