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" });
时间: 2024-10-17 15:59:29