JSFiddle - React, Tailwind, and code Playground

JavaScript

var myObj =  { first: "first"}, wrap = $(myObj);

wrap.bind("getData", function(e, prop) { return "first subscriber: " + prop; });

wrap.bind("getData", function(e, prop) { return "second subscriber: " + prop; });

wrap.bind("getData", function(e, prop) { /*this one does not return a value*/ });

wrap.bind("getData", function(e, prop) { return "tampered value of the " + prop });


wrap.bind("changeData", function(e, prop, value) {
    if (prop == "first" && !arguments.callee.inProgress) {
    e.stopImmediatePropagation(); // prevent other handlers from being fired with original value
    arguments.callee.inProgress = true; // set a flag not to fall into endless recursion
    $(e.target).data(prop, value + " tampered"); // set tampered data - also notifies other subscribers
    arguments.callee.inProgress = false; // reset the flag
    }
});

wrap.bind("changeData", function(e, prop, value) {
    console.log("Another 'changeData' handler. Property: " + prop + "; Value: " + value);
});

console.log("let's get a property");
var value = wrap.data("first");
console.log("the value is: " + value);

console.log("let's now try to set 'first' property to the value 'my first'");
wrap.data("first", "my first");
console.log("the value now is: " + $.data(myObj, "first"));