Determining the JavaScript event source within a function's scope: A guide

Question

Determining the JavaScript event source within a function's scope: A guide

Query

Can we determine the origin of a function being triggered by either a user event or an async event, without having access to the original event parameter?

Situation

I am faced with the challenge of identifying the event source within a nested function call that is unaware of who initially triggered the event.

This information is crucial for executing actions like displaying a popup or initiating a login redirection. However, since this function is invoked from various places, passing the event parameter in all callers is not feasible.

Note: I cannot pass parameters to the final function. The use of b('timer') is prohibited.

Example:

  <a onclick="b()" >call</a>
   <script>
 
   function a(){
      b();
   }

   function b(){
      final();
   }

   function final(){
      //Is there something like this caller.event.source ?
      console.log(this.caller.event.source)
   }
   
   setTimeout(a,1000);

In this scenario, I aim to retrieve source == 'timer' or 'onclick', or any other relevant information to determine the event's origin.

Update

Following basilikun's method, I have implemented the following solution:

function final(){
    var callerFunction = arguments.callee.caller,
    evtArg = callerFunction.arguments[0];
    while(callerFunction.caller){
        callerFunction = callerFunction.caller;
        if (callerFunction.arguments[0]) {
            evtArg = callerFunction.arguments[0];
        }
    }
    console.log(evtArg&&evtArg.type?'event fired by user':'event async');
}

You can view the code in action on this JSFiddle link

Any alternative approaches suggested?

javascript events dom-events

Answer 1

Answer №1

Throwing an exception within the innermost function and catching it can help determine the call stack of the program.

The method to retrieve the call stack varies depending on the vendor, such as using e.stack in Firefox, e.message in Opera, or through function body parsing in Internet Explorer and Safari. A reliable implementation can be found on eriwen.com.

From what I understand from the brief snippet provided on that website, this concept has evolved into a larger project on Github, which is likely more comprehensive and dependable than the initial snippet.

In the example given, you would utilize:

function b(){
    final();
}
function final(){
   var trace = printStackTrace();
   //output trace
}


//This would be attached as the click handler for the anchor
function anchorHandler(){
   b();
}
setTimeout(function timerCallback(){
    b();
}, 1000);

By checking whether timerCallback or anchorHandler appear in the trace, you can determine the event that triggered the function call.

Answer 2

Throwing an exception within the innermost function and catching it can help determine the call stack of the program.

The method to retrieve the call stack varies depending on the vendor, such as using e.stack in Firefox, e.message in Opera, or through function body parsing in Internet Explorer and Safari. A reliable implementation can be found on eriwen.com.

From what I understand from the brief snippet provided on that website, this concept has evolved into a larger project on Github, which is likely more comprehensive and dependable than the initial snippet.

In the example given, you would utilize:

function b(){
    final();
}
function final(){
   var trace = printStackTrace();
   //output trace
}


//This would be attached as the click handler for the anchor
function anchorHandler(){
   b();
}
setTimeout(function timerCallback(){
    b();
}, 1000);

By checking whether timerCallback or anchorHandler appear in the trace, you can determine the event that triggered the function call.

Answer 3

Answer №2

Once you've ensured that "timer" is being passed in the initial function a, the following code snippet can be used:

Try It Out Here

<a onclick="a()" >call</a>

<script>

function a(){
    b();
}

function b(){
    final();
}

function final(){
    var callerFunction = arguments.callee.caller;
    var evtArg = callerFunction.arguments[0];
    while (callerFunction.caller !== null) {
        callerFunction = callerFunction.caller;
        if (callerFunction.arguments[0]) {
            evtArg = callerFunction.arguments[0];
        }
    }
    console.log(evtArg);
}

setTimeout(function(){a("timer")}, 100);

</script>

This will extract the very last first argument passed within the chain of function calls. If regular events are utilized, it will retrieve the event object. Alternatively, with timeouts, it captures whatever is passed to the initial function.

Keep in mind that this method relies on arguments.callee.caller, which may not be universally supported and could be slower. Additionally, strict mode does not permit its use, as highlighted by robC.

Answer 4

Once you've ensured that "timer" is being passed in the initial function a, the following code snippet can be used:

Try It Out Here

<a onclick="a()" >call</a>

<script>

function a(){
    b();
}

function b(){
    final();
}

function final(){
    var callerFunction = arguments.callee.caller;
    var evtArg = callerFunction.arguments[0];
    while (callerFunction.caller !== null) {
        callerFunction = callerFunction.caller;
        if (callerFunction.arguments[0]) {
            evtArg = callerFunction.arguments[0];
        }
    }
    console.log(evtArg);
}

setTimeout(function(){a("timer")}, 100);

</script>

This will extract the very last first argument passed within the chain of function calls. If regular events are utilized, it will retrieve the event object. Alternatively, with timeouts, it captures whatever is passed to the initial function.

Keep in mind that this method relies on arguments.callee.caller, which may not be universally supported and could be slower. Additionally, strict mode does not permit its use, as highlighted by robC.

Answer 5

Answer №3

If you're looking to access the function object and add an expando, one option could be to utilize arguments.callee.caller. However, it's important to note that this approach may not work depending on your specific situation. It's worth mentioning that in strict mode, using arguments.callee.caller is considered deprecated.

<a onclick="b()" >call</a>

<script>

   function a(){
      b.calledByA = true;
      b();
   }

   function b(){
      final();
   }

   function final(){
      var caller = arguments.callee.caller;
      console.log(caller.calledByA);
      caller.calledByA = null;
   }

   setTimeout(a, 1000);

</script>

Answer 6

If you're looking to access the function object and add an expando, one option could be to utilize arguments.callee.caller. However, it's important to note that this approach may not work depending on your specific situation. It's worth mentioning that in strict mode, using arguments.callee.caller is considered deprecated.

<a onclick="b()" >call</a>

<script>

   function a(){
      b.calledByA = true;
      b();
   }

   function b(){
      final();
   }

   function final(){
      var caller = arguments.callee.caller;
      console.log(caller.calledByA);
      caller.calledByA = null;
   }

   setTimeout(a, 1000);

</script>

Determining the JavaScript event source within a function's scope: A guide

Query

Situation

Update

Answer №1

Answer №2

Answer №3

Similar questions

Is there a method to update the res object following a couchbase DB call without encountering the error "Error: Can't set headers after they are sent"?

An error occurred when saving data (date and time) retrieved from a different backend service into MongoDB

Having trouble retrieving the ng-model value from input in the controller

Turn only one bracket on the accordion

Iterate through a collection of objects and classify/sort/categorize them according to the shared key-value pairs

How can one authenticate an express session when sending a POST request?

What is the process for creating a widget that can be seamlessly integrated into someone’s website and hosted on your own site

What are the steps to integrate mailjet into my Vue application?

The Material-ui DatePicker seems to be malfunctioning and as a result, the entire form is not

Clicking on the LI element will automatically trigger a click event on the input radio button

What is the best way to substitute multiple characters at a specific position in JavaScript?

What is the best way to include the file name and size as query parameters in Node.js?

Endless Keycloak redirection loop

Save unique data for each tab in the browser

When using JavaScript to redirect with window.location, the referrer header is not properly set

Error parsing PHP string arrays into JavaScript string arrays

Ensuring Smooth Transfer: Sending Local Storage Data to MVC Controller

Angular JS: How to dynamically add and remove checkboxes in ng-repeat?

Having trouble running the script, chrome error with message passing?

Monitoring and recording user's browsing activities while excluding server-side scripting