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交互的事件,比 ...
随机推荐
- 【rlz02】二进制转十进制
Time Limit: 3 second Memory Limit: 2 MB 问题描述 输入一个二进制数,编程转换为十进制数. 整数部分不会超过65535,二进制的小数部分不会超过4位. Sampl ...
- 【t086】防护伞
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 据说2012的灾难和太阳黑子的爆发有关.于是地球防卫小队决定制造一个特殊防护伞,挡住太阳黑子爆发的区域 ...
- ios_webView
iOS开发中WebView的使用 在AppDelegate.m文件里 view sourceprint" class="item about" style="c ...
- Python爬虫之路——简单的网页抓图
转载自我自己的博客:http://www.mylonly.com/archives/1401.html 用Python的urllib2库和HTMLParser库写了一个简单的抓图脚本.主要抓的是htt ...
- angular组件间的信息传递
原文 https://www.jianshu.com/p/82207f2249c1 大纲 1.父组件向子组件传递信息:通过属性 2.子组件向父组件传递信息:通过事件 3.父组件获取子组件的信息:通过调 ...
- Write Code As If You Had to Support It for the Rest of Your Life
Write Code As If You Had to Support It for the Rest of Your Life Yuriy Zubarev YOU COULD ASK 97 PEOP ...
- iOS View自定义窍门——UIButton实现上显示图片，下显示文字
“UIButton实现上显示图片,下显示文字”这个需求相信大家在开发中都或多或少会遇见.比如自定义分享View的时候.当然,也可以封装一个item,上边imageView,下边一个label.但是既然 ...
- bash - move faster
http://teohm.com/blog/shortcuts-to-move-faster-in-bash-command-line/ Shortcuts to move faster in Bas ...
- ASCII，Unicode和UTF-8终于找到一个能完全搞清楚的文章了
前言 平时喜欢写东西,看博客,一直对编码有些懵,今天下午也不知道看到了什么,突然想了解下,就找到了这个文章,看完真的豁然开朗,这个必须留下来做纪念. 点击打开链接 1.ASCII 我们知道,计算机内部 ...
- ITFriend创业败局(五)：创业可以停止，公司必须注销，不然后果很严重
马上又要继续出来创业做事了,想到要注册公司,有个麻烦事. 事情得回到2014年9月. 当时,由于各种因素,决定放弃ITFriend,当然也放弃了原来了公司.先是,咨询了横德瑞的陈总,关于公司注销的事. ...