customEvent - 自定义事件控件

这是个Util脚本,你可以以事件驱动的方式来书写你的ui控件,对于简单事件可以直接通过nej.p('nej.v') 来执行绑定,你也可以通过Util.$$CustomEvent.$allocate(opts)来在绑定自定义事件前对此类型的自定义事件进行个性化定制来满足更复杂的需求

如:

 自定义事件控件

Allocate

自定义事件脚本所在位置 {lib}util/event/event.js

自定义事件示例如下

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _tu = _('t.u');
        _p = _('nej.ut');
        _v = _('nej.v')

    // 绑定自定义事件的节点    
    var _add = _e._$get("add");
    var _addInput = _e._$get("addInput")
    var _dispatch = _e._$get("dispatch")
    var _dispatchInput = _e._$get("dispatchInput")
    var _delete = _e._$get("delete")
    var _deleteInput = _e._$get("deleteInput")
    var _info = _e._$get("info")

    var log = function(info){
      _info.innerHTML += "<li>"+info+"</li>"
    }

    // 1.初始化customEvent类
    var _customEv = _p._$$CustomEvent._$allocate({
        // 绑定节点 默认是window
        element : window,
        // 事件名
        event : "color",
        // 事件调度前的触发事件
        oninit : function(){
          log("color"+"事件初始化")
        },
        // 事件调度前触发事件
        ondispatch:function(){
          log("color"+"事件回调被统一调度前")
        },
        // 事件添加时触发事件
        oneventadd:function(e){
          log("color"+"事件添加了一个回调")
        }
      })
    _v._$addEvent(window,"color",function(e){
      log("触发了color,通过"+e.key+"的方式");
    })
    // 这里是事件触发的两种方式  他们是等价的
    _v._$dispatchEvent(window, "color",{key:"_$dispatchEvent()"})
    window.oncolor({key:"window.onwelcome()"})

    _v._$addEvent("trigger", "click",function(){
      window.oncolor({key:"点击button#trigger"})
    })
    var _getRandomColor=function(){
      return "#"+Math.floor(Math.random()*15000000+1048576).toString(16)
    }
    // 当点击model时 绑定一个color事件 可以使得背景色变化
    var _onClickModel =function(e){
       var that = this;
      if(!_e._$hasClassName(this,"add")){
       _e._$addClassName(this,"add")
       var _handler = function(){
        _e._$setStyle(that,"background",_getRandomColor())
       }
       that._handler = _handler;
       _v._$addEvent(window,"color",_handler)
       return ;
      }else{
       _e._$delClassName(this,"add")
       _v._$delEvent(window,"color",that._handler)
      }
    }
    _v._$addEvent("model1","click", _onClickModel)   
    _v._$addEvent("model2","click", _onClickModel)   
    _v._$addEvent("model3","click", _onClickModel)   
    //开启代码高亮
    _tu._$processCode();
}
define(['{lib}util/event/event.js', '{pro}js/extend.js'],f);

Explain

参数

element [String|Node] - 事件关联节点ID或者对象,默认为window对象

event [String|Array] - 事件名称或者名称列表

oninit [Function] - 事件初始化触发事件

ondispatch [Function] - 事件调度前触发事件

oneventadd [Function] - 事件添加后触发事件

customEvent external interface

无外部接口 直接通过_v事件接口调用

更多的参数信息请参照dragger.js api说明

Recycle

如是需要拖动时可以进行回调 customEvent.$recycle();

Known Issues

Demo

自定义事件基类Demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus