原生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为触发事件的Elementvar fn = callback;callback = function(e){// 验证子选择器所匹配的nodeList中是否包含当前事件源 或 事件源的父级// 注意: 这个方法为包装函数,此处的this为触发事件的Elementvar 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){}
}
参数说明
- event: 事件名, 如 ‘click’, 并支持 ‘click.scope1’ 事件域的方法(虽然支持,但由于暂时没有使用场景。所以仅对参数进行了处理,功能上没有实现)
- querySelector: 子选择器
- callback: 事件触发后执行的函数
- useCapture: 指定事件是否在捕获或冒泡阶段执行.true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行
- 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为触发事件的Elementvar 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()
使用事件代理。 事件代理是一种事件预绑定机制, 该机制可以在事件节点不存在的情况下, 将事件绑定至已存在父级节点之上的方式。
随笔一行
这是前端最好的时代, 这也是前端最坏的时代。 众多前端框架满天飞,随着 jQuery 在前端行业的慢慢弱化,总是会有一种斯人远去,何者慰籍的感觉。互勉吧,各位。
另推荐个表格组件gridManager
原生js实现on与off 方法相关推荐
- 原生js实现preAll和nextAll方法
一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...
- 原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
- 漫谈原生JS添加元素的两种方法
漫谈原生JS添加元素 常规方法 常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值,将含有内容的变量赋值给目标元素的变量,最后,将这个目标元素的变量通过 ...
- 原生JS查找相邻元素——siblings方法
在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素,但在JS中并没有这样的方法,可以用previousSibling和nextSibling结合来实现. 不过在JS中 ...
- 原生JS替代jQuery的各种方法汇总
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
- 【数组方法大合集】原生js数组array常用工具方法大合集
var array = {/* 数组求和*/sum: arr => eval(arr.join("+")),/* 判断一个数组(支持一个字符串)里面的是否有任何一个元素被包含 ...
- css原生样式支持,原生JS读写CSS样式的方法
通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性 如:elm.setAttribute('style','c ...
- 用原生JS读写CSS样式的方法总结
一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test ...
- 原生JS实现轮播图 方法总结
方法总结: 方法一: 利用绝对定位absolute偏移量的改变来实现 具有往左往右滑动的效果 演示代码: 位移滑动轮播图1 方法二: 利用 display/opacity/visibility状态切换 ...
最新文章
- 【Android 应用开发】Android 平台 HTTP网速测试 案例 API 分析
- uva 10099 The Tourist Guide
- hook 循环点击事件用哪个_JS 事件循环 event loop,看完你可以答对 90% 的事件循环题...
- 一文带你认识MindSpore新一代分子模拟库SPONGE
- linux redis图形界面,linux安装redis和windows安装可视化工具
- linux e1000e 网卡驱动,在centos7上安装intel e1000e 网卡驱动
- input time设置24小时制_python-time、datetimme模块
- 作为Scala语法糖的设计模式
- linux修复硬盘文件命令,fsck命令_Linux fsck 命令用法详解:检查并且试图修复文件系统中的错误...
- 单片机C语言程序设计实训100例大集合
- python编程课件_Python面向对象程序设计ppt课件.ppt
- 步进电机和伺服电机的区别
- web前端——旋转3D魔方
- C语言链表详解附实例
- 究竟什么是token??
- 做网站的一些定律原理和效应
- c语言变量表达式计算器,C语言表达式计算器~
- 读英语计算机书籍读后感,英语读后感
- 成功解决TypeError: can‘t multiply sequence by non-int of type ‘float‘
- 微信小程序 - “本地资源图片无法通过WXSS 获取,可以使用网络图片,或者 base64,或者使用标签” 解决
热门文章
- 机械革命Z2如何Ubuntu安装
- 一阶导与二阶导的关系_极值与二阶导数的关系
- 如何用python绘制一系列三维的逗比风格表情包
- 浅谈一下嵌入式中的强符号和弱符号
- 绝地求生自定义服务器购买,绝地求生怎么创建自定义房间_创建自定义房间方法教程...
- linux系统管理与服务器配置高志君课后答案_Linux系统管理与服务器配置(基于CentOS 7)...
- 适合情侣看的电影(和他or她一起看过了没有)
- Keil的所有STM32 DFP pack
- 不同服务器的号有健康系统吗,王者荣耀一个微信号2个区算一个健康系统么 | 手游网游页游攻略大全...
- Redux01 续集