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. nginx-gridfs 的安装配置和使用

    (一)安装nginx前的准备 安装nginx需要安装openssl和pcre,具体安装步骤请参考nginx安装的相关博文 (二)nginx和nginx-gridfs 联合编译安装 nginx-grid ...

  2. mit java open course assignment #2

    package come; public class Marothon { public static void FirstName(String[] args1,int[] args2){ int ...

  3. linear encoder 和 PCA

  4. hdu 5590 ZYB's Biology

    Problem Description After getting scores ) begins to work with biological questions.Now he give you ...

  5. BZOJ 2186 SDOI2008 沙拉公主的困惑 数论

    题目大意:给定询问组数T和取模数P,每次询问给定两个整数n和m,求1~(n!)的数中与m!互质的数个个数模P (m<=n) 首先T<=1W,暴力肯定过不去,我们须要预处理一些东西 首先我们 ...

  6. Entityframework 伪CodeFirst开发模式应用于Sqlite数据库

    因为最近没有时间深入的研究EntityFramework的内部机制,所以具体的实现并不十分了解.微软最初的初衷是开发出一套通用的数据库访问逻辑,实现对Dal数据访问层的高度封装,其中就用到了工厂模式和 ...

  7. node.js(四)path优化(路径优化)

    1.normalize函数的基本用法 normalize函数将不符合规范的路径经过格式化转换为标准路径,解析路径中的.与..外,还能去掉多余的斜杠. 如下示例: var path = require( ...

  8. SqlServer mssql 按月统计所有部门

    以订单统计为例,前端展示柱状图(Jquery统计): 表及主要字段描述如下:表名:Orders1.日期CreateTime2.金额Amount3.用户UserID 情况一:根据部门统计某一年每月销量( ...

  9. Cannot create JDBC driver of class '' for connect URL 'jdbc:mysql://127.0.0.1:3306/test'

    原来的配置如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...

  10. QF——iOS第三方登录和社会化分享

    QQ登录的流程: 1.下载SDK,并添加到项目中: 2.添加SDK需要的依赖库,以及配置文件: 3.重写APPDelegate的方法handleOpenURL和openURL: 4.实现Tencent ...