jQuery事件處理(一)

2021-09-06 13:00:59 字數 2704 閱讀 4184

1、jquery事件繫結的用法:

$( "elem" ).on( events, [selector], [data], handler );

events:事件名稱,可以是自定義事件名稱

selector:選擇器

data:事件觸發時傳遞給事件處理函式

handler:事件處理函式

2、on方法原始碼分析

on: function( types, selector, data, fn, /*internal*/ one )

// 遍歷types物件中的每乙個元素,並遞迴呼叫自身

for ( type in types )

return this;

}// 如果data和fn都為null,說明使用者只傳了前兩個引數

if ( data == null && fn == null ) else if ( fn == null ) else

}// 如果使用者傳入的事件處理函式是false值,則將事件處理函式賦值為jquery內部的returnfalse函式

if ( fn === false ) else if ( !fn )

// 如果one為1,內部用,暫時沒看到用途

// 遍歷this物件,呼叫jqueryevent物件的add方法處理事件

return this.each( function() );

},通過分析on方法的原始碼發現,on方法並沒有處理事件相關的任何事情,只是對使用者傳入的引數進行調整,真正處理事件的是event物件

3、首先看看event物件的建構函式都做了什麼

jquery.event = function( src, props )

// 如果有src,並且src有type屬性

if ( src && src.type ) else

// 如果使用者傳入props,則擴充套件event或者覆蓋原有的屬性

if ( props )

// 建立乙個時間戳??

this.timestamp = src && src.timestamp || jquery.now();

// 給這個event物件乙個標記

this[ jquery.expando ] = true;

};看event物件的建構函式發現,建構函式做了一些初始化操作。在看一下event物件封裝的一些方法。

4、jquery的event物件

jquery的event物件提供了如下方法和屬性:

add : function(){},

remove : function(){},

trigger : function(){},

dispatch : function(){},

handlers : function(){},

fix: function(){},

simulate : function(){},

global : {},

props : {},

fixhooks : {},

keyhooks : {},

mousehooks : {},

special : {}

首先看add方法:

add: function( elem, types, handler, data, selector )

// 如果handler是乙個有handler屬性或方法的物件,則進行一些轉移賦值操作

if ( handler.handler )

// 檢查handler是否有乙個唯一的id,方便之後查詢和刪除

if ( !handler.guid )

// 如果elemdata中沒有events物件,則為其定義events屬性並賦值為空物件

if ( !(events = elemdata.events) ) ;

}// 如果elemdata中沒有handle物件

if ( !(eventhandle = elemdata.handle) )

// 事件是否會改變當前狀態,如果是則使用特殊事件,看event的special屬性。。。

special = jquery.event.special[ type ] || {};

// 根據是否有selector判斷使用哪種特殊事件(看完特殊事件再過來看這個地方)

type = ( selector ? special.delegatetype : special.bindtype ) || type;

// 根據新的type獲取新的special

special = jquery.event.special[ type ] || {};

// 組裝用於特殊事件處理的物件

handleobj = jquery.extend(, handleobjin );

// 如果是第一次呼叫,初始化事件處理佇列(將同一事件的處理函式放入陣列中)

if ( !(handlers = events[ type ]) ) }}

// 使用special的add方法進行處理

if ( special.add )

}// ???

if ( selector ) else

// 現在還沒看到是幹啥用的。

jquery.event.global[ type ] = true;

}// 將elem清空,等待**,避免記憶體洩漏

elem = null;

},

jQuery事件處理(一)

事件處理函式 一.指定事件處理函式 通過下面方法 jquery選擇器.事件名 function 向事件處理函式傳遞函式。引數名為 foo。引數值為 hello 在事件處理函式中,可以使用event.data.foo獲得引數值。示例 使用bind 方法禁止網頁彈出右鍵選單。右擊網頁,將不會彈出右鍵選單...

JQuery事件處理

一 繫結事件 bind unbind live die delegate undelegate objid bind mouseover function event 解綁對應的是unbind mouseover 注意 元素還不存在頁面dom中時,用.live 繫結方法 示例 objid live ...

Jquery 事件處理

1.5.1事件模型 5.1.1原始事件模型 5.1.2dom事件模型 1.註冊事件 body head 引數一表示要繫結的事件型別,事件型別與書劍屬性不同,他沒有字首on,如 對於事件屬性onclick來說,對應事件型別為click 引數二 表示呼叫事件型別的處理函式,該函式自帶乙個預設引數,醫用e...