JSFiddle - React, Tailwind, and code Playground

by Atsushi Nakatsugawa

HTML

<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.dev.js"></script>
<link rel="stylesheet" href="https://moongift.s3.amazonaws.com/hifive/1.3.1/h5.css">
<script src="https://moongift.s3.amazonaws.com/hifive/1.3.1/ejs-h5mod.js"></script>
<h1>イベントテスト</h1>
<textarea id="result" cols="50" rows="10"></textarea>

JavaScript

$(function() {
	function ObservableArray() {
    this.test = 'Init';
  };
  
  ObservableArray.prototype.testMethod = function() {
    this.dispatchEvent({
      type: 'changeBefore',
      data: this,
    });
    this.test = 'Hello';
    this.dispatchEvent({
      type: 'change',
      data: this,
    });    
  }
  
  h5.mixin.eventDispatcher.mix(ObservableArray.prototype);
  
  var observableArray = new ObservableArray;
	observableArray.addEventListener('changeBefore', function(e) {
    $('#result').val(`${$('#result').val()}\n,changeBefore event. test is ${e.data.test}`);
  });
  
  observableArray.addEventListener('change', function(e) {
    $('#result').val(`${$('#result').val()}\n,change event. test is ${e.data.test}`);
  });
  observableArray.addEventListener('change', function(e) {
    $('#result').val(`${$('#result').val()}\n,another change event. test is ${e.data.test}`);
  });
  
  observableArray.testMethod();
});