事件 - (Events) #15

Open
Tancy opened this Issue Jun 16, 2016 · 18 comments

Projects

None yet
@Tancy
Tancy commented Jun 16, 2016 edited

新版中文网站及文档已经上线,请访问 https://weex-project.io/cn/ , 此处后续不再维护,谢谢理解。

weex 允许对<template> 中的元素绑定事件处理器。属性名称是以on...为前缀加事件类型 和处理函数名。例如:onclick="handler"

<template>
  <image onclick="handler" ...></image>
</template>

<script>
  module.exports = {
    methods: {
      handler: function (e) {
        // TODO
      }
    }
  }
</script>

当用户点击图片时, <script> 中定义的handler 函数将被执行。

添加参数

除了使用方法名外,你也可以自定义入参。
e.g.

<template>
  <image onclick="handler('arg1', $event)" ...></image>
</template>

<script>
  module.exports = {
    methods: {
      handler: function (arg1, e) {
        // TODO
      }
    }
  }
</script>

事件对象

当一个事件函数被调用,它会收到的第一个参数就是事件对象。每个事件对象包含一下属性。

  • type: 事件名称, 如: click
  • target: 目标元素
  • timestamp: 事件触发的时间戳

接下来,请看 显示逻辑控制器.

@zghkevin
zghkevin commented Jul 7, 2016

onclick="handler('arg1', $event) ,带参的这种死活没用,
以下是代码,帮忙看看

<template>
 <container style="flex-direction: row;">

<wxc-button type="primary" value="button" onclick="say('123')"></wxc-button>

    <text onclick="textShow">abcddddddddd</text>
  </container>
</template>
<script>
require('weex-components');
//var myMo=require("@weex-module/myModule");
module.exports={
    data:{
        abc:"123"
    },
    methods:{
        say:function(param){
            //myMo.printLog(param);
            console.log(param);
        },
        textShow:function(){
            //myMo.printLog(this.abc);
            console.log("aaaaaa")
        }
    }
}
</script>

textShow可以用,say不能用,我开始以为是android下不能用,但直接在node里运行.we,发现say也是不能用的,应该怎样才能传参?还有,你们的例子中是放在list里的,里面的redirect方法也是没用传参的方式的。

@nowgoant

@Tancy

显示逻辑控制器

链接404了

@JackyAndroid

Native 是否可以主动发送事件到JS??就像React Native emit函数一样

@mickeyinfoshan

参数中不能使用绑定的data?
e.g.

    <image onclick="handler({{arg1}}, $event)" ...></image>
@Jinjiang
Contributor

参数中不能使用绑定的data?
e.g.

    <image onclick="handler({{arg1}}, $event)" ...></image>

直接 <image onclick="handler(arg1, $event)" ...> 就可以了

@hisland
hisland commented Aug 25, 2016

为什么用了 gitbook, 不用 LANGS, 反而用 github-issue 来了...

@shbIOS
shbIOS commented Aug 25, 2016

直接使用绑定的data ,传参就不用单引号括住了?@Jinjiang
那请问,什么时候用单引号,什么时候不用呢?
还有,后面的$event 是固定写法么还是。。。麻烦解释下,谢谢

@hisland
hisland commented Aug 26, 2016 edited

@shbIOS commented 16 hours ago
直接使用绑定的data ,传参就不用单引号括住了?@Jinjiang
那请问,什么时候用单引号,什么时候不用呢?
还有,后面的$event 是固定写法么还是。。。麻烦解释下,谢谢

onclick="表达式" , 表达式是 js表达式, 而 {{}} 不是js表达式的内容
{{}} 是 mustache 的 插值语法

很明显 $event 是固定的, 因为是系统传给你的, 怎么传你怎么收, 你没有控制权

@zhangjh
zhangjh commented Sep 29, 2016 edited

当一个事件函数被调用,它会收到的第一个参数就是事件对象。

例子里给的事件对象是第二个 参数啊?

handler: function (arg1, e) {
     // TODO
}
@yulinho
yulinho commented Nov 29, 2016

除了click 和 longpress 还有什么事件。支持的事件列表在哪看?

@Jinjiang
Contributor
Jinjiang commented Dec 2, 2016

@yulinho 可以看这里 https://github.com/alibaba/weex/blob/dev/doc/references/common-event.md 另外每个组件还可能有自己专有的事件类型
谢谢

@yulinho
yulinho commented Dec 4, 2016

@Jinjiang 谢谢。想实现按钮反馈。但貌似没有pressdown事件。

@yulinho
yulinho commented Dec 4, 2016

@Jinjiang 已经很优雅地实现了。

@RrtoyewxXu

@zghkevin
可以啊,

@DoranYun
DoranYun commented Dec 9, 2016

@shbIOS
传递参数不需要 {{}}。{{}} 是 mustache 的 插值语法。
$event 是实参
更多信息可参考新版文档 http://alibaba.github.io/weex/cn/doc/syntax/events.html

@DoranYun
DoranYun commented Dec 9, 2016

@zghkevin
不好意思
这文档里有错误,第一个参数应该是 $event 对象,其他才是需要带的参数。
请参考新版文档 http://alibaba.github.io/weex/cn/doc/syntax/events.html

@DoranYun
DoranYun commented Dec 9, 2016

@yulinho
现在已经支持很多事件
最新的文档和事件列表 http://alibaba.github.io/weex/cn/doc/references/common-event.html

@DoranYun

新版中文网站及文档已经上线,请访问 https://weex-project.io/cn/ , 此处后续不再维护,谢谢理解。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment