文档章节

原生js实现on与off 方法

拭目以待
 拭目以待
发布于 2017/05/04 16:55
字数 1253
阅读 18
收藏 0
点赞 0
评论 0

@拭目以待原生js实现on与off 方法

使用过jQuery的同学,应该对事件绑定方法 .on() .off() 有一定的了解。 在个人类库 jTool 中实现了这两个方法,这里就来细说下原生实现方式。

**注意: **

以下为个人类库 jTool 中 Event 实现方式。 代码中使用到一个基础方法对象 utilities, 该对象为 jTool 的基础类。 如果想了解更多,可以通过点击进入查看原码。


首先通过一个空架子来了解下实现逻辑,核心实现在getEventObject() 方法内的包装函数:

var Event = {
    // 绑定
    on: function(event, querySelector, callback, useCapture){
        return this.addEvent(this.getEventObject(event, querySelector, callback, useCapture));
    },
    // 解除绑定
    off: function(event, querySelector) {
        return this.removeEvent(this.getEventObject(event, querySelector));
    },
    // 获取 jTool Event 对象
    getEventObject: function (event, querySelector, callback, useCapture){
        // 事件代理实现核心
        // 注意: 这个方法为包装函数,此处的this为触发事件的Element
        var fn = callback;
            callback = function(e){
                // 验证子选择器所匹配的nodeList中是否包含当前事件源 或 事件源的父级
                // 注意: 这个方法为包装函数,此处的this为触发事件的Element
                var target = e.target;
                while(target !== this ){
                    if([].indexOf.call( this.querySelectorAll(querySelector), target) !== -1){
                        fn.apply(target, arguments);
                        break;
                    }
                    target = target.parentNode;
                }
            };
 
        return {
                eventName: event + querySelector,
                type: event,
                querySelector: querySelector,
                callback: callback || utilities.noop,
                useCapture: useCapture || false
            };
    },
    // 增加事件,并将事件对象存储至DOM节点
    addEvent: function (eventList){
    },
    // 删除事件,并将事件对象移除出DOM节点
    removeEvent: function (eventList){
 
    }
}

参数说明

  1. event: 事件名, 如 'click', 并支持 'click.scope1' 事件域的方法(虽然支持,但由于暂时没有使用场景。所以仅对参数进行了处理,功能上没有实现) 

  2. querySelector: 子选择器

  3. callback: 事件触发后执行的函数

  4. useCapture: 指定事件是否在捕获或冒泡阶段执行.true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行

  5. eventList: 由 .getEventObject() 方法生成的 Event 对象

on的实现逻辑

  • 通过调用jTool实例的on方法,传入参数

  • 调用getEventObject() 获取事件对象

  • 调用addEvent() 方法进行事件绑定

off的实现逻辑

  • 通过调用jTool实例的off方法,传入参数

  • 调用getEventObject() 获取事件对象

  • 调用removeEvent() 方法解除事件绑定

完整Event对象

var _Event = {
    on: function(event, querySelector, callback, useCapture) {
        // 将事件触发执行的函数存储于DOM上, 在清除事件时使用
    },
 
    off: function(event, querySelector) {
        return this.removeEvent(this.getEventObject(event, querySelector));
    },
 
    bind: function(event, callback, useCapture) {
        return this.on(event, undefined, callback, useCapture);
    },
 
    unbind: function(event) {
        return this.removeEvent(this.getEventObject(event));
    },
    // 获取 jTool Event 对象
    getEventObject: function(event, querySelector, callback, useCapture) {
        // $(dom).on(event, callback);
        if (typeof querySelector === 'function') {
            useCapture = callback || false;
            callback = querySelector;
            querySelector = undefined;
        }
        // event callback 为必要参数
        if (!event) {
            utilities.error('事件绑定失败,原因: 参数中缺失事件类型');
            return this;
        }
 
        // 子选择器不存在 或 当前DOM对象包含Window Document 则将子选择器置空
        if(!querySelector || utilities.type(this.DOMList[0]) !== 'element'){
            querySelector = '';
        }
        // #Event003 存在子选择器 -> 包装回调函数, 回调函数的参数
        // 预绑定功能实现
        if(querySelector !== ''){
            var fn = callback;
            callback = function(e){
                // 验证子选择器所匹配的nodeList中是否包含当前事件源 或 事件源的父级
                // 注意: 这个方法为包装函数,此处的this为触发事件的Element
                var target = e.target;
                while(target !== this ){
                    if([].indexOf.call( this.querySelectorAll(querySelector), target) !== -1){
                        fn.apply(target, arguments);
                        break;
                    }
                    target = target.parentNode;
                }
            };
        }
        var eventSplit = event.split(' ');
        var eventList = [],
            eventScopeSplit,
            eventObj;
 
        utilities.each(eventSplit, function(i, eventName) {
            if (eventName.trim() === '') {
                return true;
            }
 
            eventScopeSplit = eventName.split('.');
            eventObj = {
                eventName: eventName + querySelector,
                type: eventScopeSplit[0],
                querySelector: querySelector,
                callback: callback || utilities.noop,
                useCapture: useCapture || false,
                // TODO: nameScope暂时不用
                nameScope: eventScopeSplit[1] || undefined
            };
            eventList.push(eventObj);
        });
        return eventList;
    },
 
    // 增加事件,并将事件对象存储至DOM节点
    addEvent: function(eventList) {
        var _this = this;
        utilities.each(eventList, function (index, eventObj) {
            utilities.each(_this.DOMList, function(i, v){
                v.jToolEvent = v.jToolEvent || {};
                v.jToolEvent[eventObj.eventName] = v.jToolEvent[eventObj.eventName] || [];
                v.jToolEvent[eventObj.eventName].push(eventObj);
                v.addEventListener(eventObj.type, eventObj.callback, eventObj.useCapture);
            });
        });
        return _this;
    },
 
    // 删除事件,并将事件对象移除出DOM节点
    removeEvent: function(eventList) {
        var _this = this;
        var eventFnList; //事件执行函数队列
        utilities.each(eventList, function(index, eventObj) {
            utilities.each(_this.DOMList, function(i, v){
                if (!v.jToolEvent) {
                    return;
                }
                eventFnList = v.jToolEvent[eventObj.eventName];
                if (eventFnList) {
                    utilities.each(eventFnList, function(i2, v2) {
                        v.removeEventListener(v2.type, v2.callback);
                    });
                    v.jToolEvent[eventObj.eventName] = undefined;
                }
            });
        });
        return _this;
    }
};

.on() 与 .bind() 都可以进行事件绑定, 区别在于 .on() 使用事件代理。 事件代理是一种事件预绑定机制, 该机制可以在事件节点不存在的情况下, 将事件绑定至已存在父级节点之上的方式**。**


源码链接

jTool.Event 源码

jTool类库

使用jTool类库开发的表格组件


随笔一行

这是前端最好的时代, 这也是前端最坏的时代。 众多前端框架满天飞,随着 jQuery 在前端行业的慢慢弱化,总是会有一种斯人远去,何者慰籍的感觉。互勉吧,各位。

###@拭目以待

个人站点:www.lovejavascript.com

表格管理插件:gridmanager.lovejavascript.com && github地址

QQ交流群 (452781895):How To Make Love

《野生前端工程师》专辑中所有文章均为@拭目以待 原创,转载请注明出处。

© 著作权归作者所有

共有 人打赏支持
拭目以待
粉丝 3
博文 1
码字总数 1253
作品 1
西安
程序员
React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit ⋅ 05/24 ⋅ 0

weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术 ⋅ 05/27 ⋅ 0

JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪 ⋅ 05/29 ⋅ 0

Deno原理详解,让我们一起从源码分析开始

Node之父ry:在“Node中的设计错误”演讲中表示: 不允许将任意本地函数绑定至 V8 当中。 所有系统调用都将通过消息传递完成(protobuf 序列化)。 两项原生函数:send 与 recv。 这既简化了...

lvgithub ⋅ 06/05 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

ReacNative使用Navigation构建完整应用(二)

封装原生UI 一、Preview 二、封装原生进度UI 1.首先封装原生的UI进度图,我这里是使用OC 2.在Xcode中新建UI管理类RNTProgressManager 在@implement中实现 RCTEXPORTMODULE() Implement the ...

jorgon ⋅ 05/15 ⋅ 0

Facebook 正在重构 React Native,将重写大量底层

Facebook 五年前为 React Native 框架设计的原则,负面影响了与 JavaScript 代码的整合程度,也加大了某些特性的开发难度。因此 Facebook 现在准备对 React Native 架构进行重构,通过引入更...

局长 ⋅ 06/16 ⋅ 0

RN与原生交互(一)——基本页面跳转

React Native(以下简称RN)开发app过程中大部分都可以在JS端完成,但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互,比如页面跳转和数据传递。本篇文章主要以...

不變旋律 ⋅ 06/13 ⋅ 0

iOS WKWebView和JS交互的两种方式

本文介绍两种方式实现iOS WKWebView和JS交互 WKWebViewConfiguration注入WKScriptMessageHandler UIWebViewDelegate回调方法中处理 WKWebViewConfiguration注入WKScriptMessageHandler 网页很......

aron1992 ⋅ 2017/02/18 ⋅ 0

React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao ⋅ 05/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部