Javascript event listener scope

Do event listeners run in the global scope and if so does a global scoped try, catch block catch exceptions thrown inside event listeners?

Do you mean something like this?

function attachEventListener(){
  $("button").on("click", function(){
    throw "Oh no!";
  });
}

try{
  attachEventListener();
} catch(e) {
  console.log(e);
}

This won’t work and “Uncaught Oh no!” will be logged to the console.

Could you elaborate on what you are trying to do?

Here is a portion of the code

$(function(){
	eventFormEnable();
	var _buttons = document.getElementsByTagName("button");
	for (var i = 0; i < _buttons.length; i++) {
		_buttons[i].addEventListener("click", evButtonClick, false);
		};
	var _li = document.getElementsByTagName("li");
	for (var i = 0; i < _li.length; i++) {
		_li[i].addEventListener("click", evLiClick, false);
		};
})


function eventFormEnable() {
	disableSelection();
	buttonEnable(document.getElementById("cancel"));
	buttonDisable(document.getElementById("next"));
	var _inputs = document.getElementById("eventData").getElementsByTagName("input");
	for (var i = 0; i < _inputs.length; i++) {
		if (_inputs[i].hasAttribute("disabled")) {
			_inputs[i].removeAttribute("disabled");
		}
		_inputs[i].addEventListener("focusout", evBlur, false);
	}
	_inputs[_inputs.length-1].addEventListener("focusout", evLastElementBlur, false);
	_inputs[0].focus();
}


I want to have the code called by the event listeners be able to throw exceptions where needed.
What is best practice?

I just had a thought.
Do the event listeners run in global scope because they were declared in the global scope? If I define the event listeners within that first anonymous function will they run in that functions scope?
If so then my problem is solved I can put the try block around that anonymous function.

Out of interest, why are you doing this:

var _li = document.getElementsByTagName("li");
for (var i = 0; i < _li.length; i++) {
  _li[i].addEventListener("click", evLiClick, false);
};

when you seem to be including jQuery?
Wouldn’t it be easier to do:

$("li").on("click", evLiClick);

I’m still not really following what you are attempting to here. It seems to be something to do with forms and enabling/disabling elements.

Could you maybe describe in more generic terms what you are wishing to accomplish?

I’m not using jQuery although I have an on load module to provide the $ function
The on load function calls an init() function which is used to initialise various controls and add event listeners to various elements.
Once initialised the various event listeners run according to user input. The event listeners call various functions which in turn may call other functions.
The functions are declared in the global scope as apart from the initialisation function they only run when called by the event listeners.
The event listeners are also declared in the global scope.
I had assumed that the event listeners would run in the scope of the code which added them to the elements. This assumption seems to be wrong.
My original question was directed to finding how to include several event listeners within a single try block.
I now wonder if declaring the event listeners inside the on load function with the on load function within the try block is the way to do this.

ok.

It’s still not clear for me why you need a try block.

Some of the functions will be making requests to the server and will need to throw exceptions. Now some of the exceptions will be caught and handled within the handler code but I want a backstop catchall block to get any uncaught exceptions and log them.
I have found that when doing the php and javascript at the same time exception reporting saves a lot of hair pulling.

Would something like jQuery’s $.ajaxError() help you?

Whenever an Ajax request completes with an error anywhere in your code, jQuery will trigger the ajaxError event which you can catch and respond to.

I have found the solution
Declare the try, catch blocks within the onload function.
Declare the event handlers within the try block.
Do the initialisation within the try block

Any functions called by the event handlers can be declared outside the onload function.

Sounds complicated, but good luck (and thanks for taking the time to let us know what worked for you) :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.