JSFiddle - React, Tailwind, and code Playground
HTML
<input id="auth" name="auth" value="100">
<input id="key" name="key" value="abc123">
<input type="text" id="amt" name="amt" value="1">
<input type="text" id="multi" name="multi" value="2">
<button type="button" id="double" name="double">
double</button>
<button type="button" id="half" name="half">
half</button>
<button type="button" id="high" name="high">
high</button>
<button type="button" id="low" name="low">
low</button>
JavaScript
(function ($) {
$(function () { //document ready
function Controller(authId, authKey) {
this.user.id = authId;
this.user.key = authKey;
this.init();
};
Controller.prototype = {
eventChange: [ "amt", "multi" ],
eventClick: [ "double", "half", "high", "low" ],
event: {
refresh: ['amt', 'multi'],
update: ['double', 'half'],
process: ['high', 'low']
},
user: { id: '', key: '', name: '', balance: '' },
init: function () {
this.initEvents();
},
initEvents: function() {
for (var i = 0; i < this.eventChange.length; i += 1) {
var ele = document.getElementById(this.eventChange[i]);
var scope = this.handleEvent.bind(this);
if(document.addEventListener) {
ele.addEventListener("change", scope, false);
} else if(document.attachEvent) {
ele.attachEvent("onchange", scope);
}
}
for (var i = 0; i < this.eventClick.length; i += 1) {
var ele = document.getElementById(this.eventClick[i]);
var scope = this.handleEvent.bind(this);
if(document.addEventListener) {
ele.addEventListener("click", scope, false);
} else if(document.attachEvent) {
ele.attachEvent("onclick", scope);
}
}
},
handleEvent: function (e) {
var eventId = e.target.id;
for (var event in this.event) {
if (this.event[event].indexOf(eventId) !== -1) {
console.log("Event: "+event+" eventId: "+eventId);
}
}
...