Sin explicar los detalles del proyecto en el que estoy trabajando con demasiado detalle, estoy tratando de determinar una forma en la que pueda implementar un detector de eventos para cuando se accede a document.getElementById().value , o anularlo en un manera similar a un objeto, y defina un comportamiento personalizado para obtener y establecer este valor. es posible?
He intentado lo siguiente, sin éxito:
Object.defineProperty(document.getElementById, 'nodeValue', { get: function () { console.log('document.getElementById value accessed'); return this.nodeValue; }, set: function (value) { console.log('document.getElementById value set'); this.nodeValue = value; } }); y lo mismo que arriba pero con value en lugar de nodeValue :
Object.defineProperty(document.getElementById, 'value', { get: function () { console.log('document.getElementById value accessed'); return this.value; }, set: function (value) { console.log('document.getElementById value set'); this.value = value; } });Disculpas si esto parece un enfoque algo descabellado, las complejidades de JavaScript detrás de escena no son algo con lo que esté muy familiarizado. Sin embargo, el código anterior muestra lo que estoy tratando de lograr. ¡Simplemente no sé cómo!
Pasé un tiempo en MDN tratando de entender cómo funciona esto y de lo que puedo deducir, getElementById() devuelve un Elemento que hereda de la interfaz Node que contiene un nodeValue, y creo que este nodeValue es lo que me interesa. adentro, pero no puedo estar seguro.
Editar: estoy buscando que este comportamiento sea genérico, tengo más de uno (pero un número desconocido de) elementos, por lo que no estoy tratando de aplicar esto a un elemento específico.
Primero, modificar el objeto Element es una mala idea. Extenderlo es malo, pero no tanto como modificarlo. Esto se debe a que la implementación de JavaScript en el navegador web no brinda detalles sobre cómo funciona la API subyacente. Por ejemplo,
ElementTenemos un documento de la siguiente manera:
<div> <h1 id="elem-id">Header Content</h1> </div> podríamos obtener su id llamando a estas instrucciones
let elem = document.getElementById('elem-id'); elem.getAttribute('id'); // 'elem-id'; Podemos modificar getAttribute() usando:
Element.prototype.getAttribute = function (attributeKey) { // Implement your own function here return 'ok'; } A continuación, cuando llame a elem.getAttribute('id') debería devolver ok .
Esto es malo porque no hay forma de volver a la implementación predeterminada.
Element extensibleLo siguiente menos malo es extender Object. Simplemente podríamos hacer:
Element.prototype.getAttributeAndFireEvent = function (attributeKey) { console.log(`getting attribute for ${attributeKey}`); // Could be an eventEmitter return this.getAttribute(attributeKey); }entonces, podríamos usar estos métodos llamándolos así:
elem.getAttributeAndFireEvent('elem-id');Esto funcionará, pero tenga cuidado al modificar el objeto global, ya que puede causar un efecto no deseado.
Referencias: