Fixjs——自定义事件处理

#六脉神剑

于 2013-05-16 21:11:22 发布

阅读量2k

点赞数 1

分类专栏： Fixjs Javascript 我的个人作品 Fixjs 文章标签： Web 框架 JavaScript

本文链接：https://blog.youkuaiyun.com/hunkcai/article/details/8937023

版权

我的个人作品同时被 3 个专栏收录

92 篇文章

订阅专栏

Javascript

12 篇文章

订阅专栏

Fixjs

8 篇文章

订阅专栏

Fixjs介绍

Fixjs是我打算在javascript技术领域开始积累的一个框架项目，这套框架主要为开发复杂组件提供底层的框架支持。

框架的类与接口我会尽量参考flash框架的实现。同时，我也会开放Fixjs的源代码，欢迎同仁一起学习、交流。

Fixjs 0.1.0已实现的内容

【基础方法，基础类】

trace()：页面调试输出

fixjs.Class：类定义

fixjs.Object：提供对象初始化，释放控制，克隆接口

fixjs.DisposeUtil：释放资源工具类

fixjs.CloneUtil：克隆资源工具类

fixjs.Map：哈希数据结构

【事件处理】

fixjs.events.Event：事件类

fixjs.events.EventDispatcher：事件派发类

自定义事件处理

本文的主角是fixjs.events.Event和fixjs.events.EventDispatcher，看看实际的使用例子：

<head>

<scriptsrc="js/fixjs/global.js"type="text/javascript"></script>

<scriptsrc="js/fixjs/events.js"type="text/javascript"></script>

<scriptsrc="js/fixjs/jquery-1.9.1.min.js"type="text/javascript"></script>

$(document).ready(function () {

init()

});

function init() {

trace("fixjs framework", fixjs.VERSION);

var listener = new fixjs.events.EventDispatcher();

listener.addEventListener(fixjs.events.Event.COMPLETE,func1);

listener.addEventListener(fixjs.events.Event.RESIZE,func2);

var e1 = new fixjs.events.Event(fixjs.events.Event.COMPLETE);

var e2 = new fixjs.events.Event(fixjs.events.Event.RESIZE);

listener.dispatchEvent(e1);

listener.dispatchEvent(e2);

listener.removeEventListener(fixjs.events.Event.COMPLETE,func1);

listener.dispatchEvent(e1);

listener.dispatchEvent(e2);

listener.dispose();

}

functionfunc1(e) {

trace("func1:",e);

}

functionfunc2(e) {

trace("func2:",e);

}

</script>

</head>

<body>

<divid="trace">

</div>

</body>

输出

fixjs framework 0.1.0

func1： [fixjs.events.Event]complete

func2： [fixjs.events.Event]resize

使用语法上非常接近flash框架的事件处理。

fixjs.events.Event和fixjs.events.EventDispatcher的代码实现

fixjs.events.Event：

fixjs.events.Event = fixjs.Object.extend({

init: function (type) {

this.bubbles = false; //to do...

this.cancelable = false; //to do...

this.currentTarget = null;

this.eventPhase = 2; //to do...，1，2，3分别表示捕获，目标，冒泡

this.target = null;

this.type = type;

this._prevented = false;

disposing: function() {

this.target = null;

this.currentTarget = null;

clone: function() {

vare = new fixjs.Event(this.type);

return e;

isDefaultPrevented: function () {

return this._prevented;

preventDefault: function () {

this._prevented = true;

stopImmediatePropagation:function () {

//to do...

stopPropagation: function () {

//to do...

toString: function () {

return "[fixjs.events.Event]"+ this.type;

}

});

fixjs.events.Event.COMPLETE = "complete";

fixjs.events.Event.CHANGE = "change";

fixjs.events.Event.CLOSE = "close";

fixjs.events.Event.RESIZE = "resize";

fixjs.EventDispatcher：

fixjs.events.EventDispatcher = fixjs.Object.extend({

init: function (target) {

this._target = target;

this._events = new fixjs.Map();

disposing: function() {

this._events.dispose();

this._events = null;

this._target = null;

_isFunction: function(func) {

return String.prototype.slice.call(func, 0, 8) == "function";

addEventListener: function (type, func) {

if (!this._isFunction(func)){

return;

}

varlist = this._events.get(type);

if (!list) {

list = [];

this._events.set(type, list);

}

list.push(func);

removeEventListener: function (type, func) {

varlist = this._events.get(type);

if (!this._isFunction(func)|| !list || !list.length) {

return;

}

for (var i = list.length - 1; i >= 0; i--) {

list[i] == func && list.splice(i, 1);

}

dispatchEvent: function (event) {

if (!(event instanceof fixjs.events.Event))

return;

varlist = this._events.get(event.type);

if (!list || !list.length) {

return;

}

if (!event.target){

event.target = this;

if (this._target)

event.target = this._target;

}

event.currentTarget = this;

if (this._target)

event.currentTarget = this._target;

for (var i = 0, l = list.length; i < l; i++) {

list[i](event);

}

});

TODO…

上述的实现缺少一些高级事件处理：

l 事件的捕获阶段、目标阶段、冒泡阶段支持；

l 事件冒泡执行的阻止(stopPropagation和stopImmediatePropagation的实现)；

源码下载链接

http://download.youkuaiyun.com/detail/hunkcai/5392189

Fixjs专栏

Fixjs——自定义事件处理

Fixjs介绍

Fixjs 0.1.0已实现的内容

自定义事件处理

源码下载链接

相关文章

作者推荐