JavaScript 自定义事件之我见
作者:小前端 发布时间:2024-04-10 10:50:01
事件
技术一般水平有限,有什么错的地方,望大家指正。
事件就是用户和浏览器交互的一种途径。假如一个用户注册的功能,我们在填写完基本信息之后,点击提交按钮就可以实现注册功能,要想完成这个功能所需要的就是点击事件。我们预先定义好操作行为,在用户点击提交按钮时就执行我们预先定好的行为,在本例中我们的代码逻辑一般就是收集用户填写信息,验证信息合法性,利用AJAX与服务器交互。
这个过程就好像我们平时封装函数然后调用函数一样,事件其实也就类似函数定义函数调用这样的一个过程,只不过事件函数的调用是由用户的一些操作来告知浏览器,让浏览器在去调用函数的。
首先浏览器已经给我们提供了一列的事件,包括click,keydown等等,为什么还需要自定义事件呢?其实就是对我们的行为进行更准确的描述。以上面的用户注册为例我们可以定义一个名为saveMessage的事件,在点击提交按钮时触发这个事件,好像看起来更加直观一些,不过这看起来和普通的函数调用没什么区别,仔细想了想函数调用和事件触发的区别就是由我们自己执行的函数就是函数调用,不是由我们执行的函数就是事件触发。看下面的代码:
window.onload = function(){
var demo = document.getElementById("demo");
demo.onclick = handler;
function handler(){
console.log("aaa");
}
}
在我们点击按钮的时候就会打印aaa,而且很明显的可以看出函数并不是由我们调用的而是由浏览器来执行的,如果我们直接调用函数handler()一样可以打印aaa但这是由我们调用的所以是函数调用。
自定义事件的作用
自定义事件就是我们按照浏览器对事件的机制来自定义的函数。自定义事件,可以对我们的处理函数带来更好的说明,也可以为我们的插件带来更好的处理流程。假如我们又一个这样的需求:从服务器端拉取一组数据然后在HTML中显示成列表,然后标识出第一条数据,假如我们利用一个现有的处理函数,我们可能会这样来写:
dataTable("url");
$("table").find("input[type='checkbox']:first").prop("checked",true);
这是不能达到我们目的的因为JS是单线程的而AJAX是异步的,当代码$("table").find("input[type='checkbox']:first").prop("checked",true)执行的时候,我们需要的数据还没有获取到。我们去修改插件的内部实现显然是不明智的,一个可以被人接受的插件必然是有合理的回调函数(或者自定义事件)的,假如现在有一个列表绘制成功的回调函数,我们就可以把这个回调函数看做是一个事件,我们可以对这个事件添加事件操作,定义好处理函数,然后在列表绘制成功时让插件来执行这个处理函数。
自定义事件实现
我们模拟浏览器原生的事件来实现自定义事件(en:自定义事件名称,fn:事件处理函数,addEvent:为DOM元素添加自定义事件,triggerEvent:触发自定义事件):
window.onload = function(){
var demo = document.getElementById("demo");
demo.addEvent("test",function(){console.log("handler1")});
demo.addEvent("test",function(){console.log("handler2")});
demo.onclick = function(){
this.triggerEvent("test");
}
}
Element.prototype.addEvent = function(en,fn){
this.pools = this.pools || {};
if(en in this.pools){
this.pools[en].push(fn);
}else{
this.pools[en] = [];
this.pools[en].push(fn);
}
}
Element.prototype.triggerEvent = function(en){
if(en in this.pools){
var fns = this.pools[en];
for(var i=0,il=fns.length;i<il;i++){
fns[i]();
}
}else{
return;
}
}
由我们自己执行的函数是函数调用,非我们执行的函数我们可以叫做触发事件,既然函数不是由我们调用的,那么调用者怎样知道调用哪些函数就是一个问题了,所以就需要在添加事件函数和触发事件函数之间加上一些约束了,那就是两者之间有一个都能访问到的事件池,添加事件时把事件及对应的处理函数放在这个池子里,当满足触发条件时就去池子里找到要触发的事件,执行对应的处理函数,所以就有了我们上面的那一段代码。
对同一个功能(事件)可能有很多个处理函数,所以我们就需要一个集合去存储这些处理函数,这时我们应该反映出两个方案JSON或者数组,JSON的结构是key:value,对于处理函数来说名字是没有什么作用的所以我们用数组来保存处理函数,这组函数是处理什么功能的,所以我们还需要对这组处理函数由一个说明这时候就需要JSON了-->{eventName:[]}。
以简化的BootStrap模态窗来演示自定义事件的作用:
window.onload = function(){
var show = document.getElementById("show");
var hide = document.getElementById("hide");
var content = document.getElementById("content");
show.onclick = function(){
content.modal("show");
}
hide.onclick = function(){
content.modal("hide");
}
content.addEvent("show",function(){alert("show before")});
content.addEvent("shown",function(){
document.getElementById("input").focus();
alert("show after");
});
}
;(function(ep){
ep.addEvent = function(en,fn){
this.pools = this.pools || {};
if(en in this.pools){
this.pools[en].push(fn);
}else{
this.pools[en] = [];
this.pools[en].push(fn);
}
}
ep.triggerEvent = function(en){
if(en in this.pools){
var fns = this.pools[en];
for(var i=0,il=fns.length;i<il;i++){
fns[i]();
}
}else{
return;
}
}
ep.modal = function(t){
switch(t){
case "show":
this.triggerEvent("show");
this.style.display = "block";
setTimeout(function(){this.triggerEvent("shown")}.bind(this),0);//该定时器主要是为了在视觉上先看见content,在弹出消息
break;
case "hide":
this.style.display = "none";
break;
default:
break;
}
}
}(Element.prototype));
我们可以预先定义好在弹窗出现之前和出现之后的处理函数,当弹窗触发对应事件的时候就执行对应的处理函数。
来源:http://www.cnblogs.com/shinhwazt/p/5989889.html
猜你喜欢
- 0 前言安装:pip install pypiwin32 1 Excel的APIimport win32com.client as win3
- QMainWindowQMainWindow类中比较重要的方法方法描述addToolBar()添加工具栏centralWidge()返回窗口
- 1. os.listdir()概述os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表。例如:dir ='
- 在pytorch下,以数万首唐诗为素材,训练双层LSTM神经网络,使其能够以唐诗的方式写诗。代码结构分为四部分,分别为1.model.py,
- 正常开发的时候,我们都手动去写要引入到包,有过java开发的同事,用过快捷键ctrl + alt + o 会自动引入所有的依赖包,pycha
- Plotly Express是对 Plotly.py 的高级封装,内置了大量实用、现代的绘图模板,用户只需调用简单的API函数,即可快速生成
- 结合工作中的内容和大家分享一次Left Jon优化的过程,希望能给同学们新的思路。【功能背景】 我们需要
- 1. 引言最近在将一个算法由matlab转成python,初学python,很多地方还不熟悉,总体感觉就是上手容易,实际上很优雅地用pyth
- 简介想看看你最近一年都在干嘛?看看你平时上网是在摸鱼还是认真工作?想写年度汇报总结,但是苦于没有数据?现在,它来了。这是一个能让你了解自己的
- 本文实例讲述了flask 框架操作MySQL数据库。分享给大家供大家参考,具体如下:一、创建数据库表格"""C
- python-docx的简单使用'''设置表格所有单元格的四个边为0.5磅,黑色,实线可以使用返回值,也可以不使用&
- 我们去一个受欢迎的地方买东西,难免会需要排队等待。如果有多个窗口的话,就会有不同队列的产生,当然每个队伍的人数也会出现参差不齐的现象。我们今
- 看到Django和layim实现websocketde资料很少,自己就琢磨了下,顺便搭建出来了。自己要去找闲心大神授权呀。先来看图这是初次搭
- #!/bin/perlprint "please input some lines,then press Ctrl+Z. \n&q
- function createobj() { if (window.ActiveXObject)&n
- 前言左思右想没有头绪时,刚好看到一篇介绍Pygame制作飞机大战的文章。文章写的不错,文中代码拿来就能跑。有了!要不直接把飞机大战改成接兔子
- 一、维数的变形1. 一维数组转二维数组以及同维变换import numpy as nparr_1d = np.arange(12)# 使用
- 概念django自带一套信号机制来帮助我们在框架的不同位置之间传递信息。也就是说,当某一事件发生时,信号系统可以允许一个或多个发送者(sen
- 本文介绍了python selenium UI自动化解决验证码的4种方法,分享给大家,具体如下:测试环境windows7+firefox50
- 一、解析网站1.1 获取音频地址在喜马拉雅网站上,随便点开一个音频,打开“开发者工具”,再点击播放按钮,可以看到出现了多个请求:经过排查,发