Как я могу найти, где инициируется событие JavaScript?

У меня есть сценарий JS, который создал новый узел и вставил его на страницу HTML. Я обрабатываю события мутации DOM и могу захватить событие DOMNodeInserted. Внутри этой функции я хочу выяснить источник (то есть, в какой части HTML была вызвана функция скрипта) и цель (то есть, в какой части узел добавляется на странице HTML).

Я могу найти цель, используя event.target, но я не могу найти источник события.

Например, рассмотрим следующую страницу HTML с псевдокодом:

<html>
<head>
<script>
   function test() {
      //DOM access
      <div_object>.setAttribute("attr", "value");
   }
</script>
</head>
<body onload="test()">
   <div id="123">
   </div>
</body>
</html>

Я хочу, чтобы мой источник был BODY (потому что это был сценарий, инициированный), цель должна быть div(123) (потому что атрибут добавлен в div_123.

Как я могу это сделать?

Источник

3 ответа

Решение

Извините, вы не можете узнать, какой фрагмент кода вызвал событие, потому что они полностью отделены. Вы должны иметь код запуска, сохраняя свои собственные значения this/event.target в переменной для запущенного кода, чтобы забрать позже.

Но тогда, если у вас есть такое сотрудничество, вам не понадобятся DOM Mutation Events.

Если у вас есть уровень обработки событий (как часть многих платформ JS), вы можете поместить this/target отслеживание в этом слое, чтобы сработавший код мог спросить "какое последнее событие сработало передо мной?".

Но я не уверен, что это того стоит. Обычно лучше всего добавить собственные кооперативные хуки, которые связываются между компонентами; вы вообще не можете полагаться на события мутации DOM, поскольку они не поддерживаются глобально и не полностью (или вообще не поддерживаются в IE<9).

Источник

Интересно. Я посмотрел здесь (ответил, чтобы получить форматирование)

<html>
<head>
<script>
function test(e) {
  if (e) var event=e;
//DOM access
  var t="";
  for (o in event) t+='<br/>'+o+':'+event[o]
  document.getElementById('d123').innerHTML=t;
}
</script>
</head>
<body onload="test(event)">
   <div id="d123">
   </div>
</body>
</html>
Источник

Как насчет

<html>
<head>
<script>
   function test(element) {
      //DOM access
      element.setAttribute("attr", "value");
   }
</script>
</head>
<body onload="test(this)">
   <div id="123">
   </div>
</body>
</html>

?

Источник
Другие вопросы по тегам