Develop Reference

how to increment a let variable without calling/creating a listerner function

In javascript we have addEventlister, this listens to an even and calls a function called a listener function. Is an alternate approach possible where we increment the value of a "let variable" without using a function to do this in case of event being triggered?
Instead of this
let clickVar = 0;
x.addEventListener("click", RespondClick);
function RespondClick() {
clickVar++;
}
Sample Alternate implementation
x.addEventListner(click);
if (event == true){ clickVar++; }
======Edit======
Responding to the comment
The more I read this, the more it seems like an XY problem - is there something else you are trying to solve?`
In my view, the second approach is more intuitive. i.e. why create a function unless it's absolutely necessary.
Responding to the comment
There is no logic to how the second approach. The code you write will be executed once. If you want to run code more than once, you have to call a function. In order to run a function when an event happens, you need an event listener.
This simple amendment should take care of the one-time calling problem.
x.addEventListner(click);
if (event == true){ clickVar++; event=false; }
But the point I am trying to make is function could have been avoided, the code could be easy enough to speak, not only write.

Your second sample doesn't work. That simply isn't how event listeners work. You must use a callback function. If you think the first sample is too verbose, you can use an anonymous function:
let clickVar = 0;
x.addEventListener("click", function() {
clickVar++;
});
Or an arrow function in more modern versions of Javascript
x.addEventListener("click", () => {
clickVar++;
});

Does window.onload pause the script or simply awaits till value is true and runs the statement?

Out of curiosity if I am using for example.
window.onload = function() {
testFunction();
};
function testFunction() {
alert("Hello World!");
}
Does this pause the script or simply waits till the window load value is true and run the statement? I am sure its the latter but to better understand script behavior I was curious to find answer with more knowledgeable coders.

window.onload = ... is just an assignment: it stores a function in the window.onload variable. When an event happens, the JavaScript engine looks at the corresponding onsomething property and runs the function assigned to that variable. In fact, this would be valid as well:
function testFunction() {
alert("Hello World!");
}
window.onload = testFunction;
The same thing is true for functions bound with the addEventListener function.
window.addEventListener("load", function(e) {
// do something
});
window.addEventListener("load", function(e) {
// do something else
});
This simply adds functions to an underlying list of functions which will be called when the load event happens. This is required when you need to bind multiple events to the same object.

It's an event listener.
See documentation here: http://www.w3schools.com/js/js_htmldom_events.asp
and here:http://www.w3schools.com/js/js_htmldom_eventlistener.asp
You might like to try the Visual Event extension for Chrome. It shows you all event listeners that are currently attached to the page displayed.

Underscore debounce with arguments

Suppose I have this event handler:
var mousewheel = function (e) { /* blah */ };
But, I want to debounce it. So I do this, which works as expected:
var mousewheelDebounced = _.debounce(mousewheel, 500);
$(document).on("mousewheel", function (e) {
e.preventDefault();
mousewheelDebounced(e);
}
But this doesn't work as expected:
$(document).on("mousewheel", function (e) {
e.preventDefault();
_.debounce(mousewheel, 500)(e);
}
I prefer the compactness of the second form. But no debouncing occurs.
I assume no reference to the mousewheelDebounced remains, so the underlying handler is called every time. Is that the reason? How can I clean up this code, if possible?
You can see a fiddle here.

On each mousewheel event (which occurs very often) you create a new version of debounce function. This function has no history, and doesn't know that on previous event there was another one created. So it just runs. That's why you should go with the first version.

JavaScript notifications onclick event

as soon as Notification instantiates onclick function fires but I want prevent this event before actual click occures on notification
var message = new Notification("RandomString");
message.onclick(alert("Random Message"))

Try this:
var message = new Notification("RandomString");
message.onclick = function(){alert("Random Message")};

I'm going to break this down a little bit to make it more clear what your code is doing.
message.onclick() will invoke the onclick property of message, which is probably currently null and therefore can't be called as a function.
Inside of the () you have alert("Random Message"), which is going to be called right then. This means that the value of that function call will be passed in to the onclick function call as a parameter. alert() doesn't return anything, so the alert fires, then you're left with this:
message.onclick('undefined')
What you wanted to do was make onclick a function and have it call the alert.
message.onclick = function() {
alert("Random Message")
};
Now you can fire that function by clicking the element it is attached to, or you can still fire it directly with message.onclick().
The best practice now is to use addEventListener rather than onclick. addEventListener will allow you to register multiple events of the same type.
message.addEventListener('click', function() {
alert("Random Message");
});
Another thing that newer programmers often don't realize is that you don't have to make the function while attaching it as the event listener. Here's an example using both methods:
function foo() {
alert("Random Message");
}
message.onclick = foo;
message.addEventListener('click', foo);

javascript : Event execute multiple time after loading page via ajax.

I have created a page which will be loaded via ajax. On this page i have created a function which will assign some function for the specified keys [I'm using jquery Hot keys].
Here is the function that i use to assign functions
function setupKeys()
{
$.each(keyMap, function (event, listener_name){
$(document).bind('keydown', event, listener[listener_name]);
});
}
This will be executed each time when page is loaded.
If l load the page for the first time and press enter key the function will executed. Suppose if i load the page again via ajax with out refersing the browser and press the enter key the function executes two times. And i repeat the same the function will be executes three times.
How can i avoid this? keyMap is an object
keyMap = {
'Ctrl+s':'save_data',
'return':'test_return',
'tab':'test_return'
};
listener = new Array();
Please help.
[sorry for the poor English]
Krish.

Why not unbind the event before binding? No probs nothing is bound, prevents double event registration.
function setupKeys()
{
$.each(keyMap, function (event, listener_name){
$(document).unbind('keydown', listener[listener_name]);
$(document).bind('keydown', event, listener[listener_name]);
});
}

You have to check whether setupKeys has been executed. Just add a variable
var isSetupKeysCalled = false;
that will be set to false inside of your function.

Try to unbind the event before you bind it to ensure that events are not tirggered multiple times on the page.
$.each(keyMap, function (event, listener_name){
$(document).unbind('keydown').bind('keydown', event, listener[listener_name]);
});

I couldn't resolve the issue with unbind method. So i have modified the function as marc suggested. And i think its working now.
Thank you marc

Issue Resolved !
As i was using jquery Hot keys following syntax should be used to unbind the event
$.each(keyMap, function (event, listener_name){
$(document).unbind('keydown', event, listener[listener_name]);
$(document).bind('keydown', event, listener[listener_name]);
});