資訊專(zhuān)欄INFORMATION COLUMN
摘要：觸發(fā)元素是自己代碼測(cè)試取消綁定演示動(dòng)態(tài)添加一個(gè)按鈕查看是否有事件響應(yīng)
實(shí)現(xiàn)一個(gè)簡(jiǎn)單的on和off方法
介紹:
Event對(duì)象:
funcList: {}, //保存delegate所綁定的方法
ieFuncList :{} //保存ie下的綁定方法
Event 對(duì)象中的 on, off 方法,主要調(diào)用
Event.addEvent, Event.delegateHandle這兩個(gè)方法
Event.addEvent: 調(diào)用底層的addEventListener添加監(jiān)聽(tīng)事件 Event.delegateHandle: 當(dāng)發(fā)生事件之后,隨著事件的冒泡上升,判斷存 在事件委托的元素,并執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)
addEvent / offEvent:
obj.addEventListener(type, fn, false);
obj.removeEventListener(type, fn, false);
代碼-Event.js
/**
* addEvent
* author laynezhou@tencent.com
*/
window.Event = {};
var Event = {
funcList: {}, //保存delegate所綁定的方法
ieFuncList: {}, //由于保存在ie下綁定的方法
on: function(obj, selector, type, fn) {
if (!obj || !selector) return false;
var fnNew = Event.delegateHandle(obj, selector, fn);
Event.addEvent(obj, type, fnNew);
/* 將綁定的方法存入Event.funcList，以便之后解綁操作 */
if (!Event.funcList[selector]) {
Event.funcList[selector] = {};
}
if (!Event.funcList[selector][type]) {
Event.funcList[selector][type] = {};
}
Event.funcList[selector][type][fn] = fnNew;
},
off: function(obj, selector, type, fn) {
if (!obj || !selector || !Event.funcList[selector]) {
return false;
}
var fnNew = Event.funcList[selector][type][fn];
if (!fnNew) {
return;
}
Event.offEvent(obj, type, fnNew);
Event.funcList[selector][type][fn] = null;
},
delegateHandle: function(obj, selector, fn) {
/* 實(shí)現(xiàn)delegate 的轉(zhuǎn)換方法，事件冒泡上升時(shí), 符合條件時(shí)才會(huì)執(zhí)行回調(diào)函數(shù) */
var func = function(event) {
var event = event || window.event;
var target = event.srcElement || event.target;
var parent = target;
function contain(item, elmName) {
if (elmName.split("#")[1]) { //by id
if (item.id && item.id === elmName.split("#")[1]) {
return true;
}
}
if (elmName.split(".")[1]) { //by class
if (hasClass(item, elmName.split(".")[1])) {
return true;
}
}
if (item.tagName == elmName.toUpperCase()) {
return true; //by tagname
}
return false;
}
while (parent) {
/* 如果觸發(fā)的元素，屬于(selector)元素的子級(jí)。 */
if (obj == parent) {
return false; //觸發(fā)元素是自己
}
if (contain(parent, selector)) {
fn.call(obj, event);
return;
}
parent = parent.parentNode;
}
};
return func;
},
addEvent: function(target, type, fn) {
if (!target) return false;
var add = function(obj) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else {
// for ie
if (!Event.ieFuncList[obj]) Event.ieFuncList[obj] = {};
if (!Event.ieFuncList[obj][type]) Event.ieFuncList[obj][type] = {};
Event.ieFuncList[obj][type][fn] = function() {
fn.apply(obj, arguments);
};
obj.attachEvent("on" + type, Event.ieFuncList[obj][type][fn]);
}
}
if (target.length >= 0 && target !== window && !target.tagName) {
for (var i = 0, l = target.length; i < l; i++) {
add(target[i])
}
} else {
add(target);
}
},
offEvent: function(target, type, fn) {
if (!target) return false;
var remove = function(obj) {
if (obj.addEventListener) {
obj.removeEventListener(type, fn, false);
} else {
//for ie
if (!Event.ieFuncList[obj] || !Event.ieFuncList[obj][type] || !Event.ieFuncList[obj][type][fn]) {
return;
}
obj.detachEvent("on" + type, Event.ieFuncList[obj][type][fn], false);
Event.ieFuncList[obj][type][fn] = {};
}
}
if (target.length >= 0 && target !== window && !target.tagName) {
for (var i = 0, l = target.length; i < l; i++) {
remove(target[i])
}
} else {
remove(target);
}
},
};
代碼-DEMO.html
test 測(cè)試 Event
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/80153.html
摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤(pán)事件第章事件的綁定和解綁第章事件對(duì)象的使用第章自定義事件與事件用交互操作中，最簡(jiǎn)單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽(tīng)用戶(hù)單擊操作，另一個(gè)方法是方法用于監(jiān)聽(tīng)用戶(hù)雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤(pán)事件 第5章 事件的綁定和解綁 第6章 事件對(duì)象的使用 第7章 自定義事件 cli...
摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤(pán)事件第章事件的綁定和解綁第章事件對(duì)象的使用第章自定義事件與事件用交互操作中，最簡(jiǎn)單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽(tīng)用戶(hù)單擊操作，另一個(gè)方法是方法用于監(jiān)聽(tīng)用戶(hù)雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤(pán)事件 第5章 事件的綁定和解綁 第6章 事件對(duì)象的使用 第7章 自定義事件 cli...
摘要：寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專(zhuān)注源碼分享，文章分為白話(huà)版和源碼版，白話(huà)版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之綁定標(biāo)簽事件這里的綁定 寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專(zhuān)注 Vue 源碼分享，文章分為白話(huà)版和 源碼版，白話(huà)版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于...
摘要：事件的綁定和解綁的多事件綁定之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類(lèi)事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發(fā)時(shí)把這個(gè)事件往上冒泡到上，因?yàn)樯辖壎ㄊ录憫?yīng)，所以能觸發(fā)這個(gè)動(dòng)作。 事件的綁定和解綁 on()的多事件綁定 之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類(lèi)事件都是屬于快捷處理...
摘要：獲取元素距離的位置返回值為對(duì)象獲取相對(duì)于其最近的有定位的父元素的位置。不僅提供了更加優(yōu)雅的事件處理語(yǔ)法，而且極大的增強(qiáng)了事件的處理能力。注冊(cè)簡(jiǎn)單事件表示給綁定事件，并且由自己觸發(fā)，不支持動(dòng)態(tài)綁定。 jQuery特殊屬性操作 val方法 val方法用于設(shè)置和獲取表單元素的值，例如input、textarea的值 //設(shè)置值 $(#name).val(張三); //獲取值 $(#name)...
摘要：只觸發(fā)事件解除事件任然會(huì)執(zhí)行自定義事件把多個(gè)事件組合起來(lái)，或者在特定條件下觸發(fā)事件，普通的事件綁定是無(wú)法滿(mǎn)足需要的，可以通過(guò)自定義事件來(lái)形成組合。 jQuery 事件用法詳解 簡(jiǎn)介 jquery 之所以成為最受歡迎的前端庫(kù)，很大一部分是得益于它的事件具有良好的語(yǔ)義，優(yōu)秀的兼容性，并且便于管理和擴(kuò)展。 在這里我會(huì)介紹 jquery 事件的一些比較基礎(chǔ)的用法。 實(shí)現(xiàn)原理 jquery 事件...
閱讀 920·2021-11-25 09:43
閱讀 1293·2021-11-17 09:33
閱讀 3010·2019-08-30 15:44
閱讀 3310·2019-08-29 17:16
閱讀 480·2019-08-28 18:20
閱讀 1637·2019-08-26 13:54
閱讀 553·2019-08-26 12:14
閱讀 2174·2019-08-26 12:14
