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() {
  
  };  
  h5.mixin.eventDispatcher.mix(ObservableArray.prototype);
  
  var observableArray = new ObservableArray;
	observableArray.addEventListener('changeBefore', function(e) {
    console.log('changeBefore', e);
  });
  
  observableArray.addEventListener('change', function(e) {
    $('#result').val(`${$('#result').val()}\n,change event`);
  });
  observableArray.addEventListener('change', function(e) {
    $('#result').val(`${$('#result').val()}\n,another change event`);
  });
  
  observableArray.test = 'test';
  observableArray.dispatchEvent({
		type: 'change',
		data: this,
	});
});