Событие onchange

Question

Есть поле img. При открытие страницы, в атрибуте src есть какое-то значение. Пользователь может менять это поле (аватар далее) с помощью всплывающего окна (там отдельный скрипт). Как понять, что src поменялся?

let a = document.querySelector("#avatar");
if(a){
    alert(a.src); //Работает после загрузки страницы
}

document.querySelector("#avatar").src.onchange = function (e) {
    alert("Changed"); //Уже тут не работает
};

Как перехватить событие, если значение меняет другой скрипт?

Answer 1

У элемента img, а тем более - у строки img.src, нет события onchange.

document.querySelector("#avatar").onload = function (e) {
  if (this.dataset.oldsrc) {
    if (this.dataset.oldsrc != this.src)
      alert("Changed"); //Уже тут работает
  }
  this.dataset.oldsrc = this.src;
};

Answer 2

let event = new CustomEvent("change", {
  bubbles: true,
  cancelable: true
});

let avatar = document.querySelector("#avatar");

Object.defineProperty(avatar, "src", {
  get: function() {
    return this.getAttribute("src")
  },
  set: function(value) {
    this.setAttribute("src", value);
    this.dispatchEvent(event);
  }
})

avatar.addEventListener("change", event => console.log(event.target.src));


// sandbox code

let button = document.querySelector("button"),
  input = document.querySelector("input");

button.addEventListener("click", () => avatar.src = input.value);

<img src="https://i.stack.imgur.com/gZ3PJ.jpg" id="avatar" style="max-height: 100px" />


<!-- sandbox code -->

<div>
  <input type="text" value="https://i.stack.imgur.com/3TEPK.png" />
  <button>SET</button>
</div>

БЛОГ НА HUSL

Событие onchange

Ответы (2 шт):