<body> <div id="wrap"> <input type="button" id="btn" onclick="alpha" value="ccc"> </div> <script> console.log(btn.attributes.getNamedItem("onclick")) ; console.log(btn.attributes.getNamedItem("onclick").value) ; btn.attributes.getNamedItem("onclick").value = "beta()"; function beta(){ alert(`alpha changed to beta`); } </script> </body>Sobre
console.log(btn.attributes.getNamedItem("onclick"));
Esta línea imprime onclick="beta()" ,
console.log(btn.attributes.getNamedItem("onclick").value);
Esta línea imprime alfa
Las dos líneas anteriores están escritas de forma idéntica antes de la línea de sobrescritura
btn.attributes.getNamedItem("onclick").value = "beta()";
Creo que estas dos líneas console.log() deberían funcionar de la misma manera
console.log(btn.attributes.getNamedItem("onclick")) ; console.log(btn.attributes.getNamedItem("onclick").value) ; La única diferencia es que el segundo imprime el valor del primero.
Pero, ¿de dónde derivan estos diferentes resultados?
La respuesta corta es que al iniciar sesión onclick , está registrando el objeto de evento y con onclick.value está registrando la referencia de devolución de llamada de manejo de eventos (alfa).
Ahora, está accediendo al elemento en JavaScript a través de su atributo id directamente, en lugar de con una técnica de consulta DOM. Cuando le da a un elemento una id , se convierte en una propiedad global del objeto de la window y si accede a él únicamente por la id , está accediendo a una propiedad de la window , que contiene una referencia a un objeto. window no es parte del DOM y, por lo tanto, no es estándar.
Sin embargo, si accede al elemento a través de document.querySelector() , que es un método de consulta DOM, obtendrá un objeto DOM y verá las propiedades DOM estándar.
No es necesario el uso de getNamedItem() , setAttribute() y getAttribute() . Simplemente acceder a la propiedad directamente le dará acceso a esos datos (es decir btn.onclick = foo() ).
Además, se desaconseja el uso de propiedades de eventos (como onclick ). Esta es una forma más antigua de configurar eventos, pero no es tan robusta como el estándar moderno de .addEventListener() , que es lo que debería usar.
Aquí hay un ejemplo de la forma basada en estándares de interactuar con elementos DOM. El siguiente es código basado en estándares y producirá resultados consistentes en todos los clientes modernos.
<body> <div id="wrap"> <!-- Notice that the id and onclick attributes have been removed. --> <input type="button" value="ccc"> </div> <script> // Instead of direct referencing elements via their id attribute, // use a standard DOM querying method to get a DOM element reference const btn = document.querySelector("input[type='button']"); // Instead of wiring up elements to events in HTML with event attributes, // use the modern standard of .addEventListener() which allows for // multiple event handlers for any given event. btn.addEventListener("click", alpha); btn.addEventListener("click", beta); function alpha(event){ // To access details about a DOM element, just access the // property directly. In this event callback function, the // object that fired the event can be referenced via its DOM // reference (btn), the event target (event.target), or the object // that caused the event callback to be called (this). console.log("Hello from alpha"); console.log("You clicked: ", event.target); console.log("The element is a: ", this.nodeName); console.log("...with a type of: ", btn.type); console.log("...with a value of: " + event.target.value); console.log("The event being handled is: ", event.type); console.log("And the event object itself is: ", event); } function beta(){ console.log("Hello from beta"); } </script> </body>