亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery的實現(xiàn)原理的模擬代碼 -3 事件處理

 更新時間:2010年08月03日 00:27:44   作者:  
在 jQuery 中,實際注冊的事件處理函數(shù)是一個匿名的閉包函數(shù),這個函數(shù)最終都是通過調(diào)用 jQuery.event.handle 進行處理的。
在對象的私有擴展對象上,專門增加了一個名為 events 的事件管理對象,在這個對象上每種事件分別對應一個同名的屬性,這個屬性的值是一個數(shù)組,針對這個事件的處理程序依次壓入這個數(shù)組中,構成一個事件處理的列表。自定義的事件處理函數(shù)即被壓入這個列表中。

在事件觸發(fā)的時候,通過注冊的匿名函數(shù)來執(zhí)行 jQuery.event.handle ,由于使用了閉包,所以在這個函數(shù)中的 this 就是事件源對象,通過這個事件源對象找到對象的私有擴展數(shù)據(jù),然后在 events 中找到對應的事件處理程序列表,最后,依次執(zhí)行。

復制代碼 代碼如下:

/// <reference path="jQuery-core.js" />
// #2076
// 用于生成事件處理函數(shù)的 id
jQuery.guid = 1;
// jQuery 的事件對象
jQuery.event = { // # 1555
// 為對象增加事件
// elem 增加事件的元素, type 事件的名稱, handler 事件處理程序, data 事件相關的數(shù)據(jù)
add: function (elem, type, handler, data) {
var handleObjIn, handleObj;
// 確認函數(shù)有一個唯一的 ID
if (!handler.guid) {
handler.guid = jQuery.guid++;
}
// 取得這個元素所對應的緩存數(shù)據(jù)對象
var elemData = jQuery.data(elem);
// 取得元素對應的緩存對象上的事件對象和所有事件共用的處理程序
var events = elemData.events = elemData.events || {};
var eventHandle = elemData.handle;
// 是否已經(jīng)有事件處理函數(shù) handle 只有一個,都是使用 jQuery.event.handle
// 通過使用閉包,使得這個函數(shù)引用當前的事件對象,參數(shù)。
if (!eventHandle) {
elemData.handle = eventHandle = function () {
return jQuery.event.handle.apply(eventHandle.elem, arguments);
};
}
// 使得閉包處理程序可以找到事件源對象
eventHandle.elem = elem;
//
handleObj = { handler: handler, data: data};
handleObj.namespace = "";

handleObj.type = type;
handleObj.guid = handler.guid;
// 每種事件可以有一系列的處理程序,數(shù)組形式
var handlers = events[type],
special = jQuery.event.special[type] || {};
// Init the event handler queue
if (!handlers) {
handlers = events[type] = [];
// Check for a special event handler
// Only use addEventListener/attachEvent if the special
// events handler returns false
// 完成實際的事件注冊
// 實際的事件處理函數(shù)是 eventHandle
if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) {
// Bind the global event handler to the element
if (elem.addEventListener) {
elem.addEventListener(type, eventHandle, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + type, eventHandle);
}
}
}
// 自定義的處理函數(shù)在一個堆棧中,以后 jQuery.event.handle 到這里找到實際的處理程序
handlers.push(handleObj);
// Nullify elem to prevent memory leaks in IE
elem = null;
},
global: {},
// 真正的事件處理函數(shù),
// 由于是通過 return jQuery.event.handle.apply(eventHandle.elem, arguments) 調(diào)用的
// 所以,此時的 this 就是事件源對象,event 是事件參數(shù)
handle: function (event) { // 1904
var all, handlers, namespaces, namespace, events;
event = window.event;
event.currentTarget = this;
// 在當前的事件對象上找到事件處理列表
var events = jQuery.data(this, "events"), handlers = events[event.type];
if (events && handlers) {
// Clone the handlers to prevent manipulation
handlers = handlers.slice(0);
for (var j = 0, l = handlers.length; j < l; j++) {
var handleObj = handlers[j];

// 取得注冊事件時保存的參數(shù)
event.handler = handleObj.handler;
event.data = handleObj.data;
event.handleObj = handleObj;
var ret = handleObj.handler.apply(this, arguments);
}
}
return event.result;
},
// #2020
special: {}
}
// bind 函數(shù)定義
jQuery.fn.bind = function( type, fn)
{
var handler = fn;
// 調(diào)用 jQuery.event.add 添加事件
for (var i = 0, l = this.length; i < l; i++) {
jQuery.event.add(this[i], type, handler);
}
return this;
}
jQuery.fn.unbind = function (type, fn) {
// Handle object literals
if (typeof type === "object" && !type.preventDefault) {
for (var key in type) {
this.unbind(key, type[key]);
}
} else {
for (var i = 0, l = this.length; i < l; i++) {
jQuery.event.remove(this[i], type, fn);
}
}
return this;
}
// click 事件的注冊方法
jQuery.fn.click = function (fn) {
this.bind("click", fn);
return this;
}



這樣,對于頁面上的 id 為 msg 的元素,就可以通過下面的代碼注冊一個 click 事件處理函數(shù)。
復制代碼 代碼如下:

// 事件操作
$("#msg").click(
function () {
alert(this.innerHTML);
}
);

相關文章

  • jQuery點擊導航欄選中更換樣式的實現(xiàn)代碼

    jQuery點擊導航欄選中更換樣式的實現(xiàn)代碼

    這篇文章主要介紹了jQuery點擊導航欄選中更換樣式的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-01-01
  • vue-preview縮略圖報錯解決

    vue-preview縮略圖報錯解決

    這篇文章主要為大家介紹了vue-preview縮略圖報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • jquery mobile界面數(shù)據(jù)刷新的實現(xiàn)方法

    jquery mobile界面數(shù)據(jù)刷新的實現(xiàn)方法

    下面小編就為大家?guī)硪黄猨query mobile界面數(shù)據(jù)刷新的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jquery獲取復選框checkbox的值實現(xiàn)方法

    jquery獲取復選框checkbox的值實現(xiàn)方法

    下面小編就為大家?guī)硪黄猨query獲取復選框checkbox的值實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jquery iframe操作詳細解析

    jquery iframe操作詳細解析

    這篇文章主要是對jquery中iframe的操作進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • jquery 步驟進度軸插件的實現(xiàn)代碼

    jquery 步驟進度軸插件的實現(xiàn)代碼

    今天給大家分享一個jquery插件之步驟進度軸的實現(xiàn)思路,這個功能在一些網(wǎng)站注冊賬號時一般都會用到,今天就通過實例代碼給大家詳細介紹下,感興趣的朋友跟隨小編一起看看吧
    2021-05-05
  • jQuery使用之標記元素屬性用法實例

    jQuery使用之標記元素屬性用法實例

    這篇文章主要介紹了jQuery使用之標記元素屬性用法,實例分析了jQuery如何控制頁面,包含元素的屬性、css樣式風格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下
    2015-01-01
  • jquery+json實現(xiàn)動態(tài)商品內(nèi)容展示的方法

    jquery+json實現(xiàn)動態(tài)商品內(nèi)容展示的方法

    這篇文章主要介紹了jquery+json實現(xiàn)動態(tài)商品內(nèi)容展示的方法,涉及jQuery操作及解析json格式數(shù)據(jù)的相關技巧,需要的朋友可以參考下
    2016-01-01
  • 舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷

    舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷

    使用jQuery可以更加容易地遍歷DOM的父級、子級和同級元素,這里我們就來舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷:
    2016-07-07
  • jQuery實現(xiàn)樹形員工信息表

    jQuery實現(xiàn)樹形員工信息表

    這篇文章主要為大家詳細介紹了jQuery實現(xiàn)樹形員工信息表,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05

最新評論