riot.js學習【三】事件-js教程-PHP中文網

riot.js學習【三】事件

黄舟

發布： 2017-01-16 16:04:07

原創

1524 人瀏覽過

每個自訂標籤從編譯到構建，到最後的銷毀，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）！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

riot.js學習【三】事件