Como posso encontrar onde um evento JavaScript é iniciado?

StackOverflow https://stackoverflow.com/questions/4075616

Pergunta

Eu tenho um script JS que criou um novo nó e o insere na página HTML. Estou lidando com eventos de mutação DOM e posso capturar o evento DomNodeInsert. Dentro dessa função, quero descobrir a fonte (ou seja, em que parte do HTML a função de script foi chamada) e o destino (ou seja, em que parte o nó está sendo adicionado na página HTML).

Eu sou capaz de encontrar o alvo usando event.target, mas não consigo encontrar a fonte do evento.

Por exemplo, considere a seguinte página pseudocode html:

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

Quero que minha fonte seja corpo (porque esse foi o script iniciado), o alvo deve ser div (123) (porque o atributo é adicionado ao div_123.

Como posso fazer isso?

Foi útil?

Solução

Desculpe, você não pode descobrir qual pedaço de código fez com que um evento fosse acionado, eles estão completamente dissociados. Você teria que ter o código de disparo cooperado, armazenando os valores próprios this/event.target em uma variável para o código acionado mais tarde.

Mas então, se você tem cooperação como essa, não precisaria de eventos de mutação DOM.

Se você tiver uma camada de manuseio de eventos (como faz parte de muitas estruturas de JS), você pode colocar o this/target Rastreando nessa camada, para que o código acionado poderia perguntar "qual foi o último evento que disparou antes de mim?".

Mas não estou convencido de que isso valesse a pena. Geralmente é melhor adicionar seus próprios ganchos cooperativos que se comunicam entre os componentes; Geralmente, você não pode confiar nos eventos de mutação DOM, pois não são suportados globalmente e completamente (ou mesmo suportados no IE <9).

Outras dicas

A respeito

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

?

Interessante. Eu dei uma olhada aqui (respondida para obter formatação)

<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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top