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)的更多相关文章

  1. javascript 自定义事件 发布-订阅 模式 Event

    * javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...

  2. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  3. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  4. Javascript自定义事件功能与用法实例分析

    原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...

  5. JavaScript 自定义事件

    //自定义事件 function Event() { var handles = []; //绑定事件 this.addHandle=function(fn) { handles.push(fn); ...

  6. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  7. JavaScript自定义事件

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...

  8. JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()

    在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...

  9. 高级功能:很有用的javascript自定义事件

    之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...

随机推荐

  1. 新装docker 从本地仓库下载

    docker:/root# docker images Get http:///var/run/docker.sock/v1.19/images/json: dial unix /var/run/do ...

  2. send js object to webapi or mvc

    [HttpPost] public HttpResponseMessage AddInfo(UserInfoEntity userInfo) { return Request.CreateRespon ...

  3. 关于Resharper的使用经验

    发现Resharper这东西真的有点累赘,重构也是,一开始用会有很多莫名其妙的提示.现在的项目用了Resharper,js是很方便,有定位功能,但连TypeScript的js都有了.

  4. EC读书笔记系列之16:条款35、36、37、38、39、40

    条款35 考虑virtual函数以外的其他选择 记住: ★virtual函数的替代方案包括NVI手法及Strategy模式的多种形式.NVI手法自身是一个特殊形式的Template Method模式 ...

  5. 不要伤害指针(5)--void和void指针详解

    原文转载地址:http://blog.csdn.net/sunchaoenter/article/details/6587426 增加自己的想法,作为笔记. 1.概述 许多初学者对C/C++语言中的v ...

  6. 幻世(OurDream)2D图形引擎易语言汉化版更新提示

    幻世引擎的易语言汉化专版到目前为止已经累积了多个BUG,其中多个BUG是影响引擎功能使用的问题,我将会在近期发布修复所有问题的更新版本(此更新版本同时也将会支持最新的对加入的粒子系统的支持),敬请各位 ...

  7. Android minHeight/Width,maxHeight/Width

    在layout文件中,设置IamgeView的最大(最小)高度(宽度)时,需要同时设置android:adjustViewBounds="true",这样设置才会生效.在代码中设置 ...

  8. Facebook 调试工具Stetho配置入门

    I decided to spend a few hours on Stetho.Stetho is a sophisticated debug bridge for Android applicat ...

  9. Grunt之学习历程(转自网上资源-整理自用)

    认识Grunt Grunt中文文档 安装Node环境 CNode 配置Grunt Grunt中文文档-配置任务 什么是package.json package.json中文文档 关于Grunt资料 应 ...

  10. C语言实践——学生信息管理

    这是本人做的第一个实践项目,用的知识都是书上有的,没有很多很复杂的知识 同时因为没有学习 C语言 图形方面的知识,所以界面做得很丑,暂时先这样吧 源文件: #include <stdio.h&g ...