Javascript 自定义事件 (custom event)
Javascript 中经常会用到自定义事件。如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西。例如 click 事件,首先我们要能注册一个click事件(在一个button上绑定click事件),然后要能够触发这个事件,最后事件不需要的时候要能够移除事件。
我们可以借助JQuery 的方法来实现自定义事件,请看下面的例子:
<div id="myDiv">myDiv</div>
<script type="text/javascript">
$(function () {
$("#myDiv").bind("myClickEvent", function () { //bind myClickEvent
alert("This is my click event.");
});
$("#myDiv").trigger("myClickEvent"); //trigger myClickEvent
$("#myDiv").unbind("myClickEvent"); //remove myClickEvent
$("#myDiv").trigger("myClickEvent");
});
</script>
在上面的例子中创建了一个最简单的自定义事件:myClickEvent,并且使用了JQuery 的trigger()方法触发了它。最后使用$.unbind() 来移除事件,再触发事件 就不会有任何效果。
有了上面的例子,我们可能会想如何才能自己实现一个自定义事件的方法。如果不使用jQuery的方法,自己用原生的javascript 来自己定义一个方法,会不会很酷呢。。。
function EventTarget() {
this.handlers = {};
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler: function (type, handler) {
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function (event) {
if (!event.target) {
event.target=this;
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type];
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event);
}
}
},
remvoeHandler: function (type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type];
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] === handler) {
break;
}
}
handlers.splice(i,1);
}
}
}
function myClickFun() {
alert("This is my custom event.");
}
var target = new EventTarget();
target.addHandler("myClickEvent", myClickFun);
target.fire({ type: "myClickEvent" });
target.remvoeHandler("myClickEvent",myClickFun);
target.fire({ type: "myClickEvent" });
Javascript 自定义事件 (custom event)的更多相关文章
- javascript 自定义事件 发布-订阅 模式 Event
* javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
- JavaScript 自定义事件
//自定义事件 function Event() { var handles = []; //绑定事件 this.addHandle=function(fn) { handles.push(fn); ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- JavaScript自定义事件
很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...
- JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()
在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...
- 高级功能:很有用的javascript自定义事件
之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...
随机推荐
- 新装docker 从本地仓库下载
docker:/root# docker images Get http:///var/run/docker.sock/v1.19/images/json: dial unix /var/run/do ...
- send js object to webapi or mvc
[HttpPost] public HttpResponseMessage AddInfo(UserInfoEntity userInfo) { return Request.CreateRespon ...
- 关于Resharper的使用经验
发现Resharper这东西真的有点累赘,重构也是,一开始用会有很多莫名其妙的提示.现在的项目用了Resharper,js是很方便,有定位功能,但连TypeScript的js都有了.
- EC读书笔记系列之16:条款35、36、37、38、39、40
条款35 考虑virtual函数以外的其他选择 记住: ★virtual函数的替代方案包括NVI手法及Strategy模式的多种形式.NVI手法自身是一个特殊形式的Template Method模式 ...
- 不要伤害指针(5)--void和void指针详解
原文转载地址:http://blog.csdn.net/sunchaoenter/article/details/6587426 增加自己的想法,作为笔记. 1.概述 许多初学者对C/C++语言中的v ...
- 幻世(OurDream)2D图形引擎易语言汉化版更新提示
幻世引擎的易语言汉化专版到目前为止已经累积了多个BUG,其中多个BUG是影响引擎功能使用的问题,我将会在近期发布修复所有问题的更新版本(此更新版本同时也将会支持最新的对加入的粒子系统的支持),敬请各位 ...
- Android minHeight/Width,maxHeight/Width
在layout文件中,设置IamgeView的最大(最小)高度(宽度)时,需要同时设置android:adjustViewBounds="true",这样设置才会生效.在代码中设置 ...
- Facebook 调试工具Stetho配置入门
I decided to spend a few hours on Stetho.Stetho is a sophisticated debug bridge for Android applicat ...
- Grunt之学习历程(转自网上资源-整理自用)
认识Grunt Grunt中文文档 安装Node环境 CNode 配置Grunt Grunt中文文档-配置任务 什么是package.json package.json中文文档 关于Grunt资料 应 ...
- C语言实践——学生信息管理
这是本人做的第一个实践项目,用的知识都是书上有的,没有很多很复杂的知识 同时因为没有学习 C语言 图形方面的知识,所以界面做得很丑,暂时先这样吧 源文件: #include <stdio.h&g ...