RIOT.JS - Xử lý sự kiện

Chúng ta có thể đính kèm sự kiện vào các phần tử HTML theo cách tương tự như cách chúng ta truy cập các phần tử HTML bằng đối tượng refs. Bước đầu tiên, chúng ta thêm thuộc tính ref vào phần tử DOM và truy cập nó bằng cách sử dụng this.ref trong khối script của thẻ.

Attach ref - Thêm thuộc tính ref vào một phần tử DOM.

<button ref = "clickButton">Click Me!</button>

Use the refs object- Bây giờ sử dụng đối tượng refs trong sự kiện mount. Sự kiện này được kích hoạt khi RIOT gắn thẻ tùy chỉnh và nó điền vào đối tượng refs.

this.on("mount", function() {
   console.log("Mounting");
   console.log(this.refs.username.value);
})

Thí dụ

Sau đây là ví dụ đầy đủ.

custom5Tag.tag

<custom5Tag>
   <form>
      <input ref = "username" type = "text" value = "Mahesh"/>
      <input type = "submit" value = "Click Me!" />
   </form>
   <script>
      this.on("mount", function() {
         console.log("Mounting");
         console.log(this.refs.username.value); 
      })
   </script>
</custom5Tag>

custom5.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom5Tag></custom5Tag>
      <script src = "custom5Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("custom5Tag");
      </script>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau: