javascript自定义事件讲解
自定义事件
什么是自定义事件？
自定义事件:这要是跟函数有关系，就是让函数能够具备事件的某些特性
为什么要使用自定义事件？
有利于多人协作开发代码，一同开发不冲突
如何去挂载自定义事件与事件函数？
1.事件绑定的好处是什么？
首先要明确一点，自定义事件是由函数组成，也就是函数调用。先来简单了解事件绑定。
html代码
<div id="div1">
div
</div>
<span id="span1">span</span>
简单的事件绑定函数
function bind(obj,events,fn){
//如果支持obj.addEventListener（标准浏览器支持）执行，如果不支持执行obj.attachEvent（IE低版本）
if(obj.addEventListener){
obj.addEventListener(events,fn,false);
}else{
obj.attachEvent('on'+events,function(){
//在IE低版本中函数指向会指向window,使用 call来修正指向
fn.call(obj);
})
}
}
window.onload=function(){
var oDiv=document.getElementById('div1');
bind(oDiv,'click',function(){
alert('1');
});//1
bind(oDiv,'click',function(){
alert('2');
});//2
};
结果中1/2会同时出现，这是事件绑定，但这需要事件进行触发才能进行，但我们所想的是不用事件便可以达到事件绑定的效果，其实无非是执行封装函数中的fn方法，想到这里，每一个fn对应一个events,对应一个obj,我们把obj比作一座楼的楼层，而events比作书架，而fn就是对应的书，我们想的是如果将书放到指定楼层的指定书架上就行了。由此为了得到方法的集合，我们需要重写bind封装方法
function bind(obj,events,fn){
//obj；楼层
//events:书架
//fn:一本书
// 如果没有 创建楼层 ，通过对象添加属性
obj.listeners = obj.listeners || {};
//如果没有 创建书架 通过数组添加函数
obj.listeners[events]=obj.listeners[events] || [];
//放入书
obj.listeners[events].push(fn);
if(obj.addEventListener){
obj.addEventListener(events,fn,false);
}else{
obj.attachEvent('on'+events,function(){
fn.call(obj);
})
}
}
现在我们将fn的方法集合存储在了obj.listeners[events]中，下一步我们要做的是如何调用执行里面的每一个函数
var oSpan=document.getElementById('span1');
bind(oSpan,'show',function(){
alert('3');
});
bind(oSpan,'show',function(){
alert('4');
});
//函数调用
fireEvent(oSpan,'show');
//主动触发自定义事件
function fireEvent(obj, events) {
//判断如果obj.listeners以及obj.listeners[events]存在
if(obj.listeners && obj.listeners[events]){
for (var i = 0; i < obj.listeners[events].length; i++) {
//函数执行
obj.listeners[events][i]();
}
}
}
由于本人水平有限只理解到这个程度，有什么理解不到位的请大家指正，下面贴完整代码
<!doctype html>
<html lang="zh_EN">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oSpan = document.getElementById('span1');
bind(oDiv, 'click', function () {
alert('1');
});
bind(oDiv, 'click', function () {
alert('2');
});
bind(oSpan, 'show', function () {
alert('3');
});
bind(oSpan, 'show', function () {
alert('4');
});
fireEvent(oSpan, 'show');
};
//绑定事件
function bind(obj, events, fn) {
//obj；楼层
//events:书架
//fn:一本书
//创建楼层
obj.listeners = obj.listeners || {};
//创建书架
obj.listeners[events] = obj.listeners[events] || [];
//放入书
obj.listeners[events].push(fn);
if (obj.addEventListener) {
obj.addEventListener(events, fn, false);
} else {
obj.attachEvent('on' + events, function () {
fn.call(obj);
})
}
}
//主动触发自定义事件
function fireEvent(obj, events) {
for (var i = 0; i < obj.listeners[events].length; i++) {
//函数执行
obj.listeners[events][i]();
}
}
</script>
</head>
<body>
<div id="div1">
div
</div>
<span id="span1">span</span>
</body>
</html>
javascript自定义事件讲解的更多相关文章
- Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
- javascript 自定义事件 发布-订阅 模式 Event
* javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...
- JavaScript自定义事件
很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...
- Javascript 自定义事件 (custom event)
Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...
- JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()
在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...
- 高级功能：很有用的javascript自定义事件
之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...
随机推荐
- [译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
- 【u248】交通序列号
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在一条笔直的道路上共有N个路口,每个路口处都有关于该条道路的通行的信号灯. 显然,信号灯共有绿(G). ...
- stm32的DMA基础,配置流程解析
这是手册上的流程 下面是对应的库函数 下面我们就按流程去看相应的寄存器: 步骤1里的寄存器, 进入下面的函数内部: 可以找到对应的操作: 再看下一个重要的寄存器: 再看下一个寄存器: 还有一种模式是: ...
- crx 【 集合 】
Vimium dbepggeogbaibhgnhhndojpepiihcmeb-1.64-Crx4Chrome.com.crx https://www.crx4chrome.com/down/731/ ...
- [Docker] Run, Stop and Remove Docker Containers
In this lesson, we'll find out the basics of running Docker containers. We'll go over how to downloa ...
- [ES6] Use ES6 Proxies
A JavaScript Proxy allows you to intercept operations performed on objects, arrays, or functions lik ...
- Android 延时执行的几种方法
开启新线程 new Thread(new Runnable(){ public void run(){ Thread.sleep(XXXX); handler.sendMessage(); //告诉主 ...
- ［读书笔记］《Android开发艺术探索》第十五章笔记
Android性能优化 Android不可能无限制的使用内存和CPU资源,过多的使用内存会导致内存溢出,即OOM. 而过多的使用CPU资源,通常是指做大量的耗时任务,会导致手机变的卡顿甚至出现程序无法 ...
- 给自己的java程序生成API帮助文档
一.问题发现: 课本上提到"要学会给自己编写的程序生成API帮助文档",但又没有说明具体的操作步骤. 二.分析: API帮助文档有什么用?这么理解吧:如果想告诉别人你的类如何使用, ...
- 用Mochiweb打造百万级Comet应用，第一部分
http://www.iteye.com/topic/267028 原文:A Million-user Comet Application with Mochiweb, Part 1 参考资料:Com ...