Fixjs——事件回调的this

 

 

Fixjs介绍

Fixjs是一款javascript界面基础框架,主要为开发复杂组件提供底层的框架支持。

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

 

事件回调的this问题

javascript中,函数调用的时候,this指向调用的对象,这个特性会造成代码上下文的不一致。请看一下代码片段:

hui.layout.MovableExtension实例中向this._target注册一个mousedown事件,回调时调用hui.layout.MovableExtension实例的mouseDownHandler处理函数

hui.layout.MovableExtension = fixjs.Object.extend({

    init: function(target) {

        this._target = target;

        //

        this.stagePoint = new fixjs.geom.Point(0, 0);

        //

        this._target.addEventListener(fixjs.events.MouseEvent.MOUSE_DOWN, this._mouseDownHandler);

    },

    _mouseDownHandler:function (event) {

        if (event.currentTarget!= this._target || event.type != fixjs.events.MouseEvent.MOUSE_DOWN)

           return;

        //以下代码将报错,因为this并不指向当前的hui.layout.MovableExtension实例

        this.stagePoint.x = event.stageX;

        this.stagePoint.y = event.stageY;

        //

现在的问题是,mouseDownHandler中的this并不指向当前hui.layout.MovableExtension实例,这导致事件注册和事件处理的上下文不一致,对代码的编写造成困扰。

 

修正事件回调的this

Javascript函数提供了callapplly方法,能够重新设定函数调用的this。如果在注册事件的时候,传入回调时的this对象,在派发事件时调用call设置this对象,上下文不一致的问题就解决了。

因此,fixjs.events.EventDispatcher的注册和事件派发要做一些调整:

注册事件时addEventListener新增caller参数,由外部传入函数回调的this对象;派发事件时调用函数的calll方法并传入caller

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

    //

    addEventListener: function(type, func, caller){

        if (!this._isFunction(func)){

           return;

        }

        var list = this._events.get(type);

        if (!list) {

           list = [];

           this._events.set(type, list);

        }

        var item = { func: func,caller: caller };

        if (!item.caller)

           item.caller = this; //caller为空时将指向当前的fixjs.events.EventDispatcher实例

        list.push(item);

    },

    dispatchEvent: function(event) {

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

           return;

        var list = 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;

 

        var buffer = list.slice(0);

        while (buffer.length){

           varitem = buffer.splice(0, 1)[0];

           if (list.indexOf(item) >= 0) {

               item.func.call(item.caller,event); //调用函数的call并传入caller

           }

        }

    }

});

经过上述调整后,事件回调的上下文能够自行控制了,以下是修正后的hui.layout.MovableExtension代码:

hui.layout.MovableExtension = fixjs.Object.extend({

    init: function(target) {

        this._target = target;

        //

        this.stagePoint = new fixjs.geom.Point(0, 0);

        //

        this._target.addEventListener(fixjs.events.MouseEvent.MOUSE_DOWN,this._mouseDownHandler,this); //传入当前的hui.layout.MovableExtension实例this

    },

    _mouseDownHandler:function (event) {

        if (event.currentTarget!= this._target || event.type != fixjs.events.MouseEvent.MOUSE_DOWN)

           return;

        // this指向当前的hui.layout.MovableExtension实例

        this.stagePoint.x = event.stageX;

        this.stagePoint.y = event.stageY;

        //

注册事件时传入多一个参数this

 

相关文章

Fixjs专栏

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值