专注于
IT技术和业内交流

Cordova+Famous入门之事件解析

No.1什么是事件?

简单来说,事件就是任意一个可以被Famous检测到的动作。在传统的JavaScript编程中,Web页面上的任意元素都具有特定的事件,可以触发一小段JavaScript代码的运行。例如,链接上的onrollover事件可以显示一个弹出式窗口,或者onclick事件可以打开一个预览窗格。Famous跟JS的事件模型是差不多的,都有事件冒泡和事件捕获,以此类推,通过使用Famous,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件作出响应。

No.2 Famous如何进行事件传递(通过冒泡):

Famous结构是一个树形结构,说白了Famous就是通过场景图、节点、组件来使用。
显然,如果为一个超链接添加了click事件监听器,那么当该链接被点击时该事件监听器就会被执行。但如果把该事件监听器指派给了包含该链接的节点或者位于树顶端的父节点,那么点击该链接也同样会触发该事件监听器。这是因为事件不仅仅对触发的目标节点产生影响,它们还会对沿着Famous结构的所有元素产生影响。这就是大家所熟悉的事件传送,不太了解的可以参考What’s Famous。下面我们来学习一下给Famous添加事件该如何进行添加。
一、加载所需要的模块

var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var FamousEngine = famous.core.FamousEngine;

二、加载Famous引擎

FamousEngine.init();

三、创建一个场景下的节点,并取名为parent

var parent = FamousEngine.createScene().addChild()

四、创建在parent节点下的一个子节点,取名为daughter
1.给daughter定好一个位置

var daughter = parent.addChild()
    .setAlign(0.5, 0.5)
    .setMountPoint(0.5, 0.5)
    .setSizeMode('absolute', 'absolute', 'absolute')
.setAbsoluteSize(250, 250)

2.给daughter添加样式

daughter.el = new DOMElement(daughter, {
                content: '点我',
                properties:{
                    'background': 'yellowgreen',
                    'color':'white',
                    'font-size': '35px'
                }
            })

五、给daughter添加一个点击事件

daughter.addUIEvent('click')

六、冒泡到父级

parent.onReceive = function(event, payload){
    if(event==='click'){
       daughter.el.setContent('parent received click')
    }
}

整体代码如下

var famous = require('famous');
var DOMElement = famous.domRenderables.DOMElement;
var FamousEngine = famous.core.FamousEngine;

FamousEngine.init();

// UI events are sent up to parent nodes. 
var parent = FamousEngine.createScene().addChild()

// Add an onReceive method that catches all UI events
parent.onReceive = function(event, payload){
    if(event==='click'){
       daughter.el.setContent('已被点击')
    }
}


/******  Child Node   ******/

// Node for dom element
var daughter = parent.addChild()
    .setAlign(0.5, 0.5)
    .setMountPoint(0.5, 0.5)
    .setSizeMode('absolute', 'absolute', 'absolute')
    .setAbsoluteSize(250, 250)


// Styled red DOM element
daughter.el = new DOMElement(daughter, {
                content: '点我',
                properties:{
                    'background': 'yellowgreen',
                    'color':'white',
                    'font-size': '25px'
                }
            })

// Listen for click event 
daughter.addUIEvent('click')

效果图如下
Cordova+Famous入门事件解析
点击后效果变为
Cordova+Famous入门事件解析
从上面这个例子不难看出添加事件是通过addUIEvent来进行的,addUIEvent可以添加一般事件、页面相关事件等,详情戳这里戳这里啦(~ ̄▽ ̄)~JS事件大全

No.3 emit(自定义事件)

节点可以发出定制事件场景图使用.emit()方法。 使用方法是接受一个事件名称和作为一个字符串以及一个负载对象作为其两个参数。
简要概括就是根节点下发一个自定义事件,然后其下所有的子节点都能通过.onRective()这个方法接收
1.给根节点添加一个点击事件

parent.addUIEvent('click');

2.根节点下发一个自定义事件

parent.onReceive = function(e,p){
    if(e === 'click'){
        this.emit('qiuqiu');
    }
}

3.旗下所有的子节点接收这个自定义事件并作出相应的反应

//添加了文字receive
daughter1.onReceive = function(e,p){
    if(e === 'qiuqiu'){
        this.el.setContent('receive');
    }
}

//背景色变为黄色
daughter2.onReceive = function(e,p){
    if(e === 'qiuqiu'){
        this.el.setProperty('background-color','yellow');
    }
}

//背景色变为蓝色
daughter3.onReceive = function(e,p){
    if(e === 'qiuqiu'){
        this.el.setProperty('background-color','blue');
    }
}
 

什么是addComponent?如果把addcomponent看成一个人,一个大组件,人是由头、手、脚等很多组件组成,人类的大脑就相当于根节点,根节点下发一个emit()自定义事件的时候,头和手为子节点,子节点接收根节点下发的事件用onReceive()来进行接收,需要注意的是处于冒泡阶段有emit()下发事件的时候就不能使用addComponent(),而选择使用onReceive(),捕获事件时只能使用onReceive()方法,把所有的小组件代码都写在addComponent里面,这样也有方便后期开发


node.addComponent({
    onReceive:function(e,p){
       //所需要执行的代码

    }
})

我们可以看到方法里有两个参数(e,p),e是event,指的事件名字,拿刚才的例子来说我们绑定了click事件。那么这个event继承下来就是指的click事件;p是payload,,是一个载体,说明节点事件源自哪里,存储的数据,它里面所包含的参数我举个例子来看


data: ""
defaultPrevented: false
detail: 0
files: null
node: i
propagationStopped: false
stopPropagation: o()
timeStamp: 1462950139216
type: "compositionstart"
value: "测试文字"

//释义为 stopPropagation:名为o的方法,它里面的value为‘测试文字’,type为‘compositionstart’,propagationStopped的状态为false,data为空……以此类推

有了自定义事件,爸爸妈妈再也不用担心我记不住事件名称了~︿( ̄︶ ̄)︿,记不住点这里JS事件大全

在了解了事件之后,让我们一起来练习巩固一下知识吧cordova+famous实战篇(4)——事件绑定╰( ̄▽ ̄)╭╰( ̄▽ ̄)╭╰( ̄▽ ̄)╭

未经允许,不得转载本站任何文章:代码山 » Cordova+Famous入门之事件解析

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们