簡單的on事件綁定

Cristalven 發布于2019-08-20 10:26 / 621人閱讀

摘要：觸發元素是自己代碼測試取消綁定演示動態添加一個按鈕查看是否有事件響應

實現一個簡單的on和off方法

介紹:

Event對象:

   funcList: {}, //保存delegate所綁定的方法   
   ieFuncList :{} //保存ie下的綁定方法

Event 對象中的 on, off 方法,主要調用
Event.addEvent, Event.delegateHandle這兩個方法

   Event.addEvent: 調用底層的addEventListener添加監聽事件
   Event.delegateHandle: 當發生事件之后,隨著事件的冒泡上升,判斷存           在事件委托的元素,并執行對應的回調函數

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) {
        /* 實現delegate 的轉換方法，事件冒泡上升時, 符合條件時才會執行回調函數 */
        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) {
                /* 如果觸發的元素，屬于(selector)元素的子級。 */
                if (obj == parent) {
                    return false; //觸發元素是自己
                }
                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

測試 Event

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80153.html

JQuery基礎修煉-事件篇

摘要：目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作，另一個方法是方法用于監聽用戶雙擊操作。目錄第1章事件介紹第2章鼠標事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對象的使用第7章自定義事件 cli...

yy13818512006 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-事件篇

摘要：目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作，另一個方法是方法用于監聽用戶雙擊操作。目錄第1章事件介紹第2章鼠標事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對象的使用第7章自定義事件 cli...

hikui 2019-08-19 18:25 評論0 收藏0
【Vue原理】Event - 源碼版之綁定標簽DOM事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定標簽事件這里的綁定寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

phoenixsky 2019-08-23 18:35 評論0 收藏0
jQuery 事件(三) 事件的綁定和解綁、對象的使用、自定義事件

摘要：事件的綁定和解綁的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發時把這個事件往上冒泡到上，因為上綁定事件響應，所以能觸發這個動作。事件的綁定和解綁 on()的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理...

niuxiaowei111 2019-08-22 10:53 評論0 收藏0
前端基礎入門六(JQuery進階)

摘要：獲取元素距離的位置返回值為對象獲取相對于其最近的有定位的父元素的位置。不僅提供了更加優雅的事件處理語法，而且極大的增強了事件的處理能力。注冊簡單事件表示給綁定事件，并且由自己觸發，不支持動態綁定。 jQuery特殊屬性操作 val方法 val方法用于設置和獲取表單元素的值，例如input、textarea的值 //設置值 $(#name).val(張三); //獲取值 $(#name)...

fnngj 2019-08-23 14:53 評論0 收藏0
jQuery 事件用法詳解

摘要：只觸發事件解除事件任然會執行自定義事件把多個事件組合起來，或者在特定條件下觸發事件，普通的事件綁定是無法滿足需要的，可以通過自定義事件來形成組合。 jQuery 事件用法詳解簡介 jquery 之所以成為最受歡迎的前端庫，很大一部分是得益于它的事件具有良好的語義，優秀的兼容性，并且便于管理和擴展。在這里我會介紹 jquery 事件的一些比較基礎的用法。實現原理 jquery 事件...

shiina 2019-08-19 18:36 評論0 收藏0