How can I find where a javascript event is initiated?

Question

I have a JS script which created a new Node and inserts it to the HTML page. I am handling DOM mutation events and can capture DOMNodeInserted event. Inside that function I want to find out the source (i.e. in which part of the HTML has the script function been called) and the target (i.e. in which part the node is being added in the HTML page).

I am able to find the target using event.target, but I am not able to find the source of the event.

For example, consider the following pseudocode HTML page:

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

I want my source to be BODY (because that is were the script is initiated), target should be div(123) (because the attribute is added to div_123.

How can I do this?

score 0 · Answer 1 · answered Nov 02 '10 at 07:21

0

What about

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

?

answered Nov 02 '10 at 07:21

heximal

10,327
5
46
69

you mean function test(element) { alert(element.tagName); .... He wanted to set the attribute on the div – mplungjan Nov 02 '10 at 07:33

score 0 · Answer 2 · answered Nov 02 '10 at 07:31

0

Interesting. I had a look here (answered to get formatting)

<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>

answered Nov 02 '10 at 07:31

mplungjan

169,008
28
173
236

Thanks for your response. I am not allowed to modify the source JS, i.e., I am not allowed to modify the "test()" function call. Your solution is to modify that call. – Praveen Nov 03 '10 at 06:30
Morevoer, i have to find the source of the DOM access in the mutation event handler, not in test() function. When a setAttribute happens, it ll trigger DOMAttrModified event. I am supposed to handle that and find the source of the event which is "body". In case of further clarifications, feel free to ask. – Praveen Nov 03 '10 at 06:32

score 0 · Accepted Answer · answered Nov 02 '10 at 07:39

Sorry, you can't find out what piece of code caused an event to be triggered, they're completely decoupled. You would have to have the triggering code co-operate by storing the values of its own this/event.target in a variable for the triggered code to pick up later.

But then if you have co-operation like that, you wouldn't need DOM Mutation Events.

If you have an event handling layer (as is part of many JS frameworks), you could put the this/target tracking in that layer, so the triggered code could ask “what was the last event that fired, before me?”.

But I'm not convinced this would be worth it. It's usually best to add your own co-operative hooks that communicate between components; you can't generally rely on DOM Mutation Events since they're not globally and completely supported (or indeed supported at all on IE<9).

How can I find where a javascript event is initiated?

3 Answers3