data-attr Listener

data-attr Listener

const testDataAttrListener = function () {
    function bindValue(objectToBind) {
        const elemToBind = document.getElementById(objectToBind.id);
        elemToBind.addEventListener("change", function () {
            objectToBind.value = this.value;
            console.log(this.value);
            console.log("objectToBind", objectToBind);
        });
    }

    function proxify(id) {
        const handler = {
            set(target, key, value, receiver) {
                target[key] = value;
                document.getElementById(target.id).dataset.valueTest = value;
                return Reflect.set(target, key, value);
            },
        };
        return new Proxy({ id }, handler);
    }

    const myObject = proxify("element-to-bind");
    bindValue(myObject);

    setTimeout(() => {
        const el = document.getElementById("element-to-bind");
        el.dataset.valueTest = "test";
        const event = new Event("change");
        // Dispatch it.
        el.dispatchEvent(event);
    }, 3000);
};

testDataAttrListener();

// html
// <input id="element-to-bind" data-value-Test="boo" type="text">