Estoy creando un widget personalizado con JavaScript y necesito crear un evento que se active cuando un usuario cambia una casilla de verificación, por ahora tengo un evento de clic, pero eso no funciona para lo que queremos.
Así que pensé que crear un evento personalizado es el camino a seguir, y mi idea es que ya tengo una variable que obtiene el valor del elemento seleccionado, así que quería crear un evento personalizado que escuche este valor y cuando cambia, activará el evento. No sé si esta es la mejor manera de hacer esto, pero esta es mi idea.
this.addEventListener("selectedItem", event => { var eventSelectedItem = new CustomEvent("SelectedItem"); console.log(selecteditem); }) function selecteditem(selectItem) { const selectedItem = _SelectItem // this is the variable that gets the value of the selected Item // now I don't know what to do here, I am reading a few things but this is the first time I am creating a custom event; // I tried setters and getters but that I didn't understood how to make that work; // Basically I need to save the last value and get the new value and then dispatch the event; selectItem.dispatchEvent(selecteditem); }Cualquier ayuda sería apreciada, ya sea una nueva idea o cómo crear esto.
Editar para incluir más información.
let tmpl = document.createElement("template"); tmpl.innerHTML = '<div style="" id="root"></div>'; class MultiInput extends HTMLElement { constructor() { super(); _shadowRoot = this.attachShadow({ mode: "open" }); _shadowRoot.appendChild(tmpl.content.cloneNode(true)); this._export_settings = {}; this.addEventListener("click", event => { var eventclick = new Event("onClick"); this.dispatchEvent(eventclick); }); // This event works, but it triggers on all clicks (ofc) but it is not the event that I want this.addEventListener("change", event => { var eventchange = new Event("onChange"); this.dispatchEvent(eventchange); console.log("Event is triggered"); }); // This works only on textbox that I also have in the widget } }Si entiendo lo que quieres decir, esto es más simple que crear un evento. Solo necesitas agregar el código en la función.
document.querySelectorAll("input").forEach(item => { item.addEventListener("change", event => { // Add your code here }) }) <input type="checkbox" id="Hello"> <label for="Hello">Hello</label> <br> <input type="checkbox" id="World"> <label for="World"`enter code here`>World</label>Bueno, con proxies puedes rastrear propiedades:
let obj = { myValue: 1 } let proxy = new Proxy(obj, { get(obj, prop) { return obj[prop] }, set(obj, prop, val){ console.log("value changed") obj[prop] = val } }) setInterval(() => { proxy.myValue++ },1000) La función set es su evento desencadenante, cada vez que cambia su valor proxy.myValue
Cada vez que se cambia el valor de la propiedad, la función set se activa