首页 > 代码库 > Javascript 自定义事件 (custom event)
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)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。