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交互的事件,比 ...
随机推荐
- html的meta标签的charset应该用UTF-8还是utf-8?
之前我也纠结过写html的时候是用<meta charset="UTF-8"/> 或者是 <meta charset="utf-8"/> ...
- HDU 1408 盐水的故事 数学水题
http://acm.hdu.edu.cn/showproblem.php?pid=1408 题目: 挂盐水的时候,如果滴起来有规律,先是滴一滴,停一下:然后滴二滴,停一下:再滴三滴,停一下...,现 ...
- QQ号快速登录漏洞及被盗原理
web安全:QQ号快速登录漏洞及被盗原理 为什么你什么都没干,但QQ空间中却发了很多小广告?也许你的QQ账号已经被盗.本文将讲解一个QQ的快速登录的漏洞. 我前阵子在论坛上看到一个QQ的快速登录的 ...
- 【42.07%】【codeforces 558A】Lala Land and Apple Trees
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- Error while trying to retrieve text for error ORA-12705
今天, 按照以前的学习笔记, 配置ProC 但是, 却发生了如题的错误. Google一下, 都是NLS_LANG环境变量设置有问题, 我核一下没有问题. 问题在哪? 原来是ORACLE_HOME环境 ...
- strong & weak 的理解
import "ViewController.h" @interface ViewController () /*weak*/ @property (nonatomic,weak) ...
- css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
- pycharm的集成vim
pycharm的集成vim 1. 基本使用 激活码 BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl ...
- Guava中TreeRangeMap基本使用
RangeMap跟一般的Map一样.存储键值对,依照键来取值.不同于Map的是键的类型必须是Range,也既是一个区间.RangeMap在Guava中的定义是一个接口: public interfac ...
- [Angular] Create a simple *ngFor
In this post, we are going to create our own structure directive *ngFor. What it should looks like i ...