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交互的事件,比 ...
随机推荐
- lv resize
# lvreduce -L -400G /dev/vg_atalinux001/lv_home # resize2fs /dev/vg_atalinux001/lv_home resize2fs ...
- AndroidAnnotations使用说明书—AndroidAnnotations是怎样工作的？
AndroidAnnotations的工作方式非常easy.它使用标准的java注入处理工具,自己主动加入了一个额外的编译步骤来生成源码. 源代码是什么?每个增强的类,比方每个用@EActivity注 ...
- php 修改文件内容,替换指定内容
$f='./test.txt'; file_put_contents($f,str_replace('{{modulename}}','Hospital',file_get_contents($f)) ...
- jquery-11 如何制作鼠标右键菜单
jquery-11 如何制作鼠标右键菜单 一.总结 一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...
- php实现二叉树的镜像（二叉树就是递归）
php实现二叉树的镜像(二叉树就是递归) 一.总结 二叉树就是递归 二.php实现二叉树的镜像 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / ...
- TortoiseGit拉取或推送项目提示 HTTP Basic: Access denied fatal: Authentication failed.
TortoiseGit拉取或推送项目提示 HTTP Basic: Access denied fatal: Authentication failed. 大体意思是,HTTP基本认证失败,访问被拒 ...
- tomcat 启动项目时出现 ZipException: error in opening zip file
错误情况 项目用 maven 打好 war 包后放到 tomcat 下,启动 tomcat,出现以下错误 3-Nov-2017 12:21:44.346 严重 [localhost-startStop ...
- Android的事件分发
1. Touch事件和绘制事件的异同之处 Touch事件和绘制事件非常相似,都是由ViewRoot派发下来的,可是不同之处在绘制事件是由应用中的某个View发起请求,一层一层上传到ViewRoot.再 ...
- Android自定义组件系列【4】——自定义ViewGroup实现双侧滑动
在上一篇文章<Android自定义组件系列[3]--自定义ViewGroup实现侧滑>中实现了仿Facebook和人人网的侧滑效果,这一篇我们将接着上一篇来实现双面滑动的效果. 1.布局示 ...
- [Jenkins] Creating Application builds
After installing the jenkins, we start creating new job. 1. Give job names (your project name): 2. G ...