在写这段代码之后,本人使用过jQuery这个库,一直对jQuery的自定义事件有疑惑,就看了看jQuery的源码,廓然开朗。
jQuery代码实现和触发自定义实现如下:
jQuery的定义方式: $(dom).bind('data-change',function(){//dom为一个html元素 alert("asd"); }) jQuery使用方式 : $(dom).trigger('init-change',[data]);
但内部机制是怎么触发这个事件的呢?原来jQuery通过的是缓存这些自定义事件,我就自己实现了一把,下面是我的代码:
var Dojo = function(selecter,context){ return new this.init(selecter,context);//创建一个新的对象 } Dojo.prototype.event = {}; Dojo.prototype.init = function(selecter,context){ this.gid = 0; var dom = this.getDom(selecter); this.dom = dom; this.dom.gid = this.gid++; return this; } Dojo.prototype.getDom = function(selecter){ var dom = document.getElementById(selecter) || null; return [dom]; } Dojo.prototype.addEvent = function(eventName,fn){//存放自定义的事件 if(!this.event[eventName]){ this.event[eventName] = []; } this.event[eventName].push( fn ); } //Dojo工具类 Dojo.Util = {}; Dojo.Util.isFunction = function(fn){ return Object.prototype.toString.call( fn ).slice(8,-1) === 'Function'; } Dojo.Util.ToArray = function(args){ return Array.prototype.slice.call( args , 0 ); } //简单实现事件的绑定 Dojo.prototype.click = function(fn){ this.event[this.dom.gid] = this.event[this.dom.gid] || []; var i = j = 0; var self = this; if(Dojo.Util.isFunction( fn )){ for(;i<this.dom.length;i++){ this.dom[i].addEventListener('click' , function(e,data){ fn.call(self,e,data); } ,false); } } } Dojo.prototype.trigger = function(eventName,data){ var i = 0; if(!this.event[eventName]){ return; } for(len = this.event[eventName].length;i<len;i++){ this.event[eventName][i].apply(this.dom,data); } return this; } Dojo.prototype.init.prototype = Dojo.prototype; var dom = new Dojo('dom'); //为创建的dom对象增加自定义函数 //这里面就增加了两个一样的事件 dom.addEvent("data-change",function(){ console.log(arguments); }); dom.addEvent("data-change",function(){ var arr; arr = Dojo.Util.ToArray(arguments); alert(arr); }); //click的时候触发事件 dom.click(function(e){ this.trigger("data-change",['a','c','d']); });
相关推荐
浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。下面小编给大家带来了JS实现自定义弹窗,感兴趣的朋友一起看看吧
这里为了方便使用的Kibo做例子,使用google搜索出来的结果一般都是javascript原生实现,很简单的,这里不做介绍。这里是实现了在一个textarea中enter进行保存的例子,屏蔽掉了原来的回车事件。 代码如下: 代码如下:...
Brute Select 简单的可定制自定义选择输入实现
本文实例为大家分享了JS自定义滚动条效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style...
用于处理自定义事件的简单 js 模块。 您可以用作事件管理器或使任何对象成为事件发射器。 适用于 Node、requirejs 或任何浏览器。 以下是如何使用它: //var EventManager = require("event-manager"); // If you ...
本篇文章主要介绍了JS简单实现自定义右键菜单实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考,具体如下: 这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的...
#####一个简单的跨浏览器jQuery插件,可轻松实现自定义事件跟踪。 您可以将dataTrack.js与Google的Universal Analytics(analytics.js),Google的Classic Analytics(ga.js)或几乎任何其他记录了具有Category,...
本文实例讲述了JS自定义对象实现Java中Map对象功能的方法。分享给大家供大家参考。具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象。 这里我创建一...
Vue自定义v-has指令实现按钮权限判断 以后台管理系统为例,每个用户所拥有的按钮权限不一样。管理员配置权限之后,用户登录时,从接口拿到按钮权限列表,然后根据后台数据判断显示哪些按钮。 简单说一下,自定义...
本文主要给大家分享的是一则javascript实现的自定义右键行为的小技巧,非常的简单实用,有相同需求的小伙伴可以参考下。
将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位置即可。 封装完之后调用起来也很简单,看看调用的代码吧 <modal show={{showModal}} height='60%' bindcancel=modalCancel bin
JS实现简单实用的自动动态tips提示信息框(小的气泡框)效果
【动画消消乐|CSS】082.单span标签实现自定义简易过渡动画
JavaScript一个最简单的事件模型,需要有事件绑定与触发,还有事件删除。本文将对其具体实现代码进行解析,需要的朋友一起来看下吧
今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理: 1、屏蔽右键默认事件;(一度我以为修改的就是默认事件) 2、对一个ul的隐藏;(这个我也曾迂腐的认为值得这样操作的都是div,汗) 3、对鼠标点击...
自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现,而不是只在 .vue文件。 1、实现toast插件封装(类似简易版的elementUi的message) 先书写一个toast组件 ...
实现自定义双工RPC协议的简单扩展消息hypercore-extension-rpc实现自定义双工RPC协议的简单扩展消息npm install hypercore-extension-rpc用法const Service = require('hypercore-extension-rpc')const service = ...
基于JavaScript实现简单的轮播图 本文实例为大家分享了JavaScript实现简单的轮播图的具体代码,供大家参考,具体内容如下 1、先获取元素 盒子 左右按钮 2、鼠标经过 显示/隐藏 左右侧按钮 3、动态生成小圆圈、 ...