首頁 > 文章 > web前端 > riot.js學習【三】事件

riot.js學習【三】事件

黄舟原創: 2017-01-16 16:04:071582瀏覽

每個自訂標籤從編譯到構建，到最後的銷毀，riot.js都提供了相應的事件。

內建有4種事件：

update

在標籤真正刷新UI前執行。它允許我們在更新UI之前，改寫context的資料

updated

在標籤UI更新之後執行。這時候，我們可以對dom進行操作了

mount

在標籤建置完成，放在頁面後面執行。

unmount

當標籤從頁面移除的時候執行。【一般是呼叫this.unmount()時執行】

打個例子：

[code]<!Doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="riot.js"></script>
    <script type="text/javascript" src="compiler.js"></script>
</head>
<body>

    <todo></todo>

</body>

<!-- 最前面一定要有空格或TAB -->
<script type="riot/tag">
    <todo>
        <p>一个自定义标签 BY { title || "" }</p>

        // 监听4种事件
        // 执行顺序，跟绑定顺序无关
        this.on("updated", function(){
            // 这里可以操纵DOM
            console.log("updated");
        }).on("mount", function(){
            console.log("mount");
        }).on("unmount", function(){
            console.log("unmount");
        }).on("update", function(){
            // 这里可以注入数据
            this.title = "da宗熊";
            console.log("update");
        });
    </todo>
</script>

<script type="text/javascript">
    riot.mount("todo");
</script>
</html>

效果如下：

riot.js學習【三】事件

輸出分別為: update -> updated -> mount

;

所以沒印出unmount

事件的綁定，也可以類似jquery一樣，一次綁定多個事件，又或者自己去觸發事件

綁定多個：

[code]this.on("update mount", function(){
    // update和mount都会经过这里
});

新手遇坑：

unmount事件，在this.unmount()之後觸發，或者自定義標籤，重新構建時，自動觸發

[code]this.trigger("update", "参数1", "参数2"...);

事件回調的第一個參數，並不是event

[code]riot.mount("todo");
riot.mount("todo"); // 第二次会先触发unmount，然后才是update/updated/mount

這一點跟jquery是大大的不一樣

以上就是riot.js學習【三】事件的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：riot.js學習【二】mixin下一篇：riot.js學習【二】mixin

看更多

riot.js學習【三】事件

相關文章