Observing DOM changes, Specifically input value change using Plain JavaScript

Question

I have a certain requirement where I want to be notified about all changes in HTML input on a page specifically value of all input elements on page, if value change by any means

So far what all I have tried is

1. Approach1: Hooking into all input elements on page with input or change event (this only emits values if you are interacting with particular input field & does not emit other input value changes on page even if you hook event into all of them)
2. Approach2: MutationObserver - this only hooks into elements on page if there is any visible or html attribute change on page. in case input value gets updated, this does not notify about change

With this I ran out of depth for achieving end result. If you have already gone through similar situations or have a direction to follow through, help is appreciated!!

Edit: To elaborate more with example

If I change input with red marker that changes value of blue marker element as well. I am more interested in getting notified by any sort of event when there is change in value of blue marker element when its value is changed by red one.

Edit2:

Approach1 Above

// hook into all input events and listen to their changed value
const inputs = document.querySelectorAll("input");
for (const inp of inputs) {
  inp.addEventListener("input", function(ev) {
    console.log("changed", ev.target)
  })
}

/* 
  Input1 and input2 are interconnected
  scenario: enter any number in input1 that multiplies its number by 2 & populates its value in number2
*/
const input1 = document.getElementById('input1') 
const input2 = document.getElementById('input2') 
input1.addEventListener('input', (event) => { input2.value = event.target.value * 2 })

/* 
 Expectation: If i change value of input1, automatically input2 value is getting changed because of the way they are internconnected
 
 If you check console logs now, Even though we added Listners on both input on line 4 (javascript), and even though both inputs are getting changed. only one value is getting logged. i.e. of input1
 
Although I know input event does not work this way, I am looking into other ways of listening to both input changes
*/

<!-- We will call this input1 -->
<input type="number" id="input1" />
<!-- We will call this input2 -->
<input type="number" id="input2" />

Approach2

// hook into container with MutationObserver and listen to all mutations of container
var mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

const container = document.getElementById('container');
mutationObserver.observe(container, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

/* 
  Input1 and input2 are interconnected
  scenario: enter any number in input1 that multiplies its number by 2 & populates its value in number2
*/
const input1 = document.getElementById('input1') 
const input2 = document.getElementById('input2') 
input1.addEventListener('input', (event) => { input2.value = event.target.value * 2 })

/* 
 Expectation: If i change value of input1, automatically input2 value is getting changed because of the way they are internconnected
 
 If you check console logs now, it will only observe mutations of input1, it won't log any mutations of input2
 
Expectation is it should also detect changes/mutations happending in input2 since that is also changing
*/

<section id="container">
  <!-- We will call this input1 -->
  <input type="number" id="input1" />
  <!-- We will call this input2 -->
  <input type="number" id="input2" />
</section>

PS: I do not have any control over DOM, so Its not in my hand to modify property of DOM as explained in related question, My use case is around a chrome extension, which is only allowed to read and process DOM

With suggested answer, it does not really listens to typing event, it only relies on value being changed by calling .value on element, which is not necessarily case in my question, change of input can be done by any possible approach by developers of different websites. so basically - input value changed by javascript is not realy use case I am looking for

Answer 1

The following code will hook the input event of all <input> elements on the page:

const inputs = document.querySelectorAll("input");
for (const inp of inputs) {
  inp.addEventListener("input", function(ev) {
    console.log("changed", ev.target, ev.target.value)
  })
}

hello
<input type="text" /> 
world
<input type="text" />