小微型库(3.绑定on和解绑off)

小微型库(3.绑定on和解绑off)小微型库(3.绑定on和解绑off)

大家好,又见面了,我是你们的朋友全栈君。

on绑定

$(“div”).on(“click mouseenter click.Liang”, function(){});

off解绑

$(“div”).off();

$(“div”).off(“click.sjl”);

//对于_addEventFn(){}函数的解释
//events属性是以下的格式
    div.events = {
        click : {
            sjl : function(){
                console.log();
            },
            yl : function(){

            },
            anonymous : [fn, fn, fn]  //存放没有自定义名字的事件函数值
        },
        mouseenter : {
            anonymous : [fn, fn, fn],
            sjl : function(){
                
            },
            yl : function(){
                
            }
        },
    }
复制代码
//阻止默认行为的兼容
if(!Event.prototype.preventDefault){
    Event.prototype.preventDefault = function(){
        window.event.returnValue = false;
    };
}
//阻止冒泡的兼容
if(!Event.prototype.stopPropagation){
    Event.prototype.stopPropagation = function{
        window.event.cancelBubble = true;
    };
}
//将添加到dom身上的事件函数存储起来的方法
    function _addEventFn(data){
    //dom:节点  type:事件数组  fn:事件函数
    //之前从来没绑定过任何事件,把它变成一个对象
    if(typeof data.dom.events === "undefined"){
        data.dom.events = {};
    }
    //之前没有绑定过相同类型的事件
    if(typeof data.dom.events[data.type[0]] === "undefined"){
        data.dom.events[data.type[0]] = {};
        data.dom.events[data.type[0]].anonymous = [];
        //anonymous是一个数组,存放匿名函数
    }
    //type是数组,类似["mouseenter", "sjl"] 或者["click"]
    //判断有没有自定义事件的名字  存事件函数
    if(data.type[1] === undefined){
        //如果为undefined,说明是匿名函数,存放到anonymous属性对应的数组中
        data.dom.events[data.type[0]].anonymous.push(data.fn);
    }else{
        data.dom.events[data.type[0]][data.type[1]] = data.fn;
        // data.dom.events[data.type[0]]代表事件 例如click
    }
    }

 //兼容removeEventListener
    function _removeEvent(dom, type, fn, bool){
        //v, key1, v.events[key1].anonymous[j], false
        if(dom.removeEventListener){
            //主流
            dom.removeEventListener(type, fn, !!bool);
        }else{
            //ie
            dom.detachEvent("on"+type, fn);
        }
     }
//原型里的方法
Liang.prototype = function(){
    constructor : Liang,
    init : function(){}, //(1)
    html : function(){}, //(2)
    //事件绑定
    on : function(eventType, fn){
        //非字符串不做操作
        if(typeof eventType !== "string") return;
        var arr = eventType.trim().split(/\s+/);
        for(var i = 0, len = this.length; i < len; i++){
            (function(i, that){
               //that当前jq对象中的元素
                for(var j = 0, len = var.lenght; j < len; j++ ){
                    var type = arr[j].split(/\./),
                        eventFnName = null;
                    if(type[0] === "mousewheel"){
                        //需要判断火狐及其他浏览器的事件
                        function _eventWheelFn(e){
                            var dir = e.wheelDelta / 120 || -e.detail / 3;
                            fn.call(that, e, dir) === false && e.preventDefault();
                        }
                        type[0] = (that.onmousewheel === null) ? "mousewheel" : "DOMMouseScroll";
                        eventFnName = _eventWheelFn;
                    }else{
                        function _eventFn(e){
                            e = e || window.event;
                            fn.call(that, e) === false && e.preventDefault;
                        }
                        eventFnName = _eventFn;
                    }
                    that.addEventListener ? 
                    that.addEventListener(type[0], eventFnName, false) :
                    that.attachEvent("on"+type[0], eventFnName);
                    
                    //存储对应事件函数
                    _addEventFn({
                        dom : that,
                        type : type,
                        fn : eventFnName
                    });
                }
            }(i, this[i]))
        }
        return this;
    },
    //事件解绑
    off : function(){
        if(typeof eventType === "undefined"){
            //解绑所有事件
            Liang.each(this, function(v){
                // v 当前进来的元素
                for(var key1 in v.events){
                    // key1 是事件类型的名字 例如 click mouseenter
                    for(var key2 in v.events[key1]){
                        // key2 是事件类型对象中自定义的名字 例如 sjl
                        if(Liang.type(v.events[key1][key2]) === "function"){
                        //给自定义名字的事件解绑函数
                            _removeEvent(v, key1, v.events[key1][key2],false);
                        }else{
                            //给anonymous数组中的函数解绑
                            var len = v.events[key1].anonymous.length;
                            for(var j = 0; j < len; j++){
                              //解绑anonymous数组内的函数
                              _removeEvent(v, key1, v.events[key1].anonymous[j], false);
                            }
                        }
                    }
                }
                v.events = {}; //清空events里所有数据
            });
        }else if(typeof eventType === "string"){ //例如 "click.yl mouseenter.sjl"
            var arr = eventType.trim().split(/\s+/); //["click.yl", "mouseenter.sjl"]
            //判断输入的为[""],则不作操作
            if(arr.toString() === "") return this;
            //对事件名数组的遍历
            for(var i = 0, len = arr.length; i < len; i++){
                var type = arr[i].split(/\./); //["click","yl"],["mouseenter","sjl"] 
                //遍历实例对象,取到元素,解绑元素身上对应的事件
                Liang.each(this, function(v){
                    //判断是否火狐,修改对应的事件名
                    if(type[0] === "mousewheel"){
                        //判断滚动事件是否在火狐或者主流浏览器执行
                        type[0] = (v.onmousewheel === null) ? "mousewheel" : "DOMMouseScroll";
                    }
                    if(type.length > 1){
                        //解绑自定义名的事件函数
                        _removeEvent(v, type[0], v.events[type[0]][type[1]], false);
                        delete v.events[type[0]][type[1]];
                    }else{
                        //解绑同类型事件
                        //解绑对应事件的所有匿名事件 例如$("div").off("click")
                        for(var j = 0, len = v.events[type[0]].anonymous.length; j < len; j++){
                            _removeEvent(v, type[0], v.events[type[0]].anonymous[j], false);
                        }
                        //解绑该事件类型中有名的 例如$("div").off("click.yl")
                        for(var k in v.events[type[0]]){
                            // k是自定义属性名 sjl yl  //判断在不在数组的原型上.false则表示不在,说明是function,取反
                            if(!(v.events[type[0]][k] instanceof Array)){
                                //自定义名字的事件属性值
                                _removeEvent(v, type[0], v.events[type[0]][k], false);
                            }
                        }
                        delete v.events[type[0]];
                    }
                });
            }
        }
    },
 }

复制代码

转载于:https://juejin.im/post/5bdbf8ef51882516f5784bbc

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107212.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 易语言钓鱼源码_觅风现在还做易语言吗

    易语言钓鱼源码_觅风现在还做易语言吗水平有限请轻喷.这是一个易语言写的钓鱼程序,把自己伪装成一个QQ安全中心界面.其实我也没用过易语言,但在我看来(可能是我水平不高看不出来) 病毒内部循环繁杂无章,启动较慢… 简单差了一下程序没有加壳病毒很简单没加壳,这也是我第一次分析易语言. 没有什么特别的技巧,OD载入跟

  • pychram2022.01.13激活码_在线激活

    (pychram2022.01.13激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 计时器SetTimer

    计时器SetTimerSDK编程笔记—计时器篇什么时候我们需要用到SetTimer函数呢?当你需要每个一段时间执行一件事的的时候就需要使用SetTimer函数了。让我们先来看看SetTimer函数的原型:UINTSetTimer(UINTnIDEvent,UINTnElapse,void(CALLBACKEXPORT*lpfnTimer)(HWND,UINT,YINT,DWORD))当使用S

    2022年10月27日
  • 初识Zigbee协议栈及其安装

    初识Zigbee协议栈及其安装1.什么是Zigbee协议栈?什么是ZigBee协议栈呢?它和ZigBee协议有什么关系呢?协议是一系列的通信标准,通信双方需要共同按照这一标准进行正常的数据发射和接收。协议栈是协议的具体实现形式,通俗点来理解就是协议栈是协议和用户之间的一个接口,开发人员通过使用协议栈来使用这个协议的,进而实现无线数据收发。ZigBee的协议分为两部分,IEEE802.15.4定义了PHY(物理层)和MAC(介质访问层)技术规范;ZigBee联盟定义了NWK(网络层)、APS(

  • 转:用C++实现的一种插件体系结构—–概述

    转:用C++实现的一种插件体系结构—–概述

  • phpstorm(或webstorm) 打开后 一直停留在scanning files to index….,或跳出内存不够的提示框…

    phpstorm(或webstorm) 打开后 一直停留在scanning files to index….,或跳出内存不够的提示框…

    2021年10月11日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号