简单的on事件绑定

Cristalven 发布于2019-08-20 10:26 / 535人阅读

摘要：触发元素是自己代码测试取消绑定演示动态添加一个按钮查看是否有事件响应

实现一个简单的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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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