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

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

0 голосов
/ 02 ноября 2010

У меня есть 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 (потому что это был сценарий, инициированный), target должен быть div (123) (потому что атрибут добавлен в div_123.

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

Ответы [ 3 ]

0 голосов
/ 02 ноября 2010

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

<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>
0 голосов
/ 02 ноября 2010

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

Но тогда, если выДля такой операции вам не понадобятся события мутации DOM.

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

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

0 голосов
/ 02 ноября 2010

А как же 

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

...