Skip to content

Instantly share code, notes, and snippets.

@akmil
Created February 28, 2020 13:08
Show Gist options
  • Save akmil/c7c04631342550a6a0a24e42f01591cc to your computer and use it in GitHub Desktop.
Save akmil/c7c04631342550a6a0a24e42f01591cc to your computer and use it in GitHub Desktop.
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">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment