jQuery中的事件

1.載入DOM

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

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

# 

# 

補充：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();
       })
})

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

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

补充：（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()方法一样。

 

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