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交互的事件,比 ...
随机推荐
- 初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序
原文:初识Visual Studio Code 一.使用Visual Studio Code 开发C# 控制台程序 1. 安装.NET Core 安装包下载地址:https://www.microso ...
- Mybatis全面详解——下（学习总结）
原文地址:https://blog.csdn.net/ititii/article/details/79999481 一.Mybatis关联查询映射 这里采用一个案例来进行分析:(下面的案例都是采用M ...
- Html表单中遇到的问题
原文 https://www.jianshu.com/p/4466b8294007 大纲 1.表单提交的方式GET和POST的区别 2.js无法对input的file类型的值进行赋值 3.js获取in ...
- Instruments性能优化-Core Animation
简书地址:http://www.jianshu.com/users/6cb2622d5eac/latest_articles 当App发展到一定的规模.性能优化就成为不可缺少的一点.可是非常多人,又对 ...
- 你的薪水增速跑赢GDP了没
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...
- [NPM] Create a node script to replace a complex npm script
In this lesson we will look at pulling out complex npm script logic into an external JavaScript file ...
- php正则怎么使用（最全最细致）
php正则怎么使用(最全最细致) 一.总结 一句话总结: 1.正则中的行定位符是什么? 解答:(^与$) 2.正则中什么时候用行定位符? 解答:如"^de",表示以de开头的字符串 ...
- 百度消息推送SDK探究（并附上最简推送Demo）
上一篇<百度消息推送REST API探究>中了解了如何使用REST API推送消息,这一篇我们来看一下百度消息推送为我们提供的SDK. 帮助文档:http://developer.baid ...
- [Angular] @ContentChild and ngAfterContentInit
@ContentChild normally works with ngAfterContentInit lifecycle. @ContentChild is used for looking in ...
- Oracle数据库零散知识02
15,函数的创建,要求必须有返回值,必须在语句中调用,需要多个返回值时,使用out参数类型,在user_procedures表中查询属性,在user_source表中查询源代码,创建示例: CREAT ...