Develop Reference

Does event listeners means host elements too?

I'm new to JS, just a dumb question on event listener, I know how to add an event listener, but confused with what really it is, below is some code:
document.getElementById("myBtn").addEventListener("click", function(){
...
});
and I was reading a book which says sth like this:
event in the listing is triggered when the mouse button is clicked on the host element, and the event provides its listeners with ...
so can I say the listener in this case is the button element(with id myBtn)? or listener is a property of button element?

A listener is an event of DOM element, in this case, the click event is an event of your button myBtn that fires when a user makes a click in the primary button.
You can get more info from here

To answer your question in very simple terms:
There are three javascript constructs to look out for in this code
document.getElementById("myBtn").addEventListener("click", function(){ ... });
They are:
the event
The actual event that occurs on the page. This can be triggered by a user, another event, or can be time-triggered.
the event listener
This is an internalised javascript software construct that can be initialized by the programmer to listen for various events that occur on the page.
the event handler
This is a function created by the programmer and passed to the event listener to execute whenever an event occurs i.e. handle the event.
Interestingly, the only thing you can see explicitly in the above code is the event handler - function(){ ... }. Why? Because it is the only thing the programmer explicitly creates in the code.
So, the code can be read as -
get my button with id myBtn.
initialize an Event Listener to listen for click Events on this button and
delegate an anonymous Event Handler to execute when this event occurs.

jQuery - Register / unregister listener for element "document"

I'll try to explain my problem. I'm using mouseup event listener so I can check whenever a click is performed and the target is not the desired element. This is the code I'm using:
function clickOutListener(element, callbackFunction){
$(document).mouseup(function(e){
if(!$(element).is(e.target) && $(element).has(e.target).length === 0) callbackFunction.call(this, null);
});
}
As you can see, the event listener is bound to the global document element and the way to unbind the listener would be:
$(document).off("mouseup");
Here comes what I need to achieve. If I unbind mouseup listener it will affect the other elements which use this listener (dropdowns and other features). I must guess that everytime I'm registering a listener it's not overriding the previous defined listener but adding the defined target function.
How can I access the different defined target functions for the same listeners?
$(document).mouseup(funct1);
$(document).mouseup(funct2);
$(document).mouseup(funct3);
How would you unregister the registered listener just for "funct2"?
Thank you in advance.

You can namespace your events when using the .on() syntax.
$(document).on('mouseup.myNamespace', function(e){ ... }
This allows you to remove events by namespace whilst leaving others in place.
$(document).off('mouseup.myNamespace');

Are methods considered event handlers?

I'm studying javascript and jquery am a little confused on the proper definition of an event handler.
So far I've read .on() (for example ) is technically a method but it is handling events. So would .on() be considered an event handler? Or is it an event listener because the function inside of it is the handler?

No. jQuery's on is a method which adds event listeners. It's not an event handler and does not add event handlers.
An event listener is a function that is invoked when a certain kind of event is dispatched on a specific element or one of its descendants.
function eventListener() {
console.log("I'm an event listener");
}
window.addEventListener('load', eventListener);
An event handler is some kind of special event listener:
An element can only have one event handler at a time for each kind of event
It is invoked during the bubble phase, not the capture one.
It can be stored in a raw uncompiled form which, when compiled, will run with a very weird scope.
function eventHandler() {
console.log("I'm an event handler");
}
window.onload = eventHandler;
var eventHandler = 'console.log("I\'m a raw uncompiled event handler");';
document.body.setAttribute('onload', eventHandler);

No, an event handler is what happens when the event fires. The .on() method is the plumbing that wires that up.
So for example, if you have:
function dealWithTheClick(){
alert('Clicked!');
}
$('#someButton').on('click', dealWithTheClick);
The function dealWithTheClick is the event handler, because it's the function that 'handles' the event that was fired when the click occurred.

Assign click event inside click event

Inside of an onclick event, I'm binding another onclick event. But when I initiate the first event, the second always executes:
var MiniMenu = {
show : function(menu_id, element){
// this doesn't have any thing to do with the problem - I think
position = $(element).offset();
$('#' + menu_id).css({
left : position.left,
top : position.top + 13
}).show();
// Why is this event called on the first click,
// even though it isn't bound at that time?
$(document).click(function(){
alert('here')
$('.mini-menu').hide();
$(document).unbind('click')
})
}
}
I'm using Adobe Air - if that helps :)

I guess because the click-event just bubbles up ;-)
Think of the following: you have a stack of event handlers assigned to the click event, probably most of them without you knowing of their existance
Your click handler <-- currently executing
...
System click handler 2 <-- already finished
System click handler 1
Now while executing, your click handler adds another listener to this event.
New click handler
Your click handler <-- currently executing
...
System click handler 2
System click handler 1
When your first click handler finishes, the click event just gets passed to the next listener in the queue (this is called bubbling), because you don't prevent the event propagation. That means that after Your click handler returns, you have the following situation:
New click handler <-- currently executing
Your click handler
...
System click handler 2
System click handler 1

This may be a bubbling issue. Is the first click event's source element something inside of your document? (or is it the document, as is the second click event handler?)
Events bubble up to the container all the way to the document. If you're handling the event on an image or something, and then setting the click event handler on something up the chain, it may be fired right afterward.

$(document).click(function(){
alert('here')
$('.mini-menu').hide();
$(document).unbind('click')
})
This binds the click to the document really, so ANY click anywhere in the document will cause this to be activated...
I would need more information to be able to isolate what you REALLY want to do with this even.
EDIT: Just to add some info, you may want to return FALSE side the event to prevent the event from propagating (bubbling) up the document and to stop. Study the event handling documentation for jQuery for more tangible results pertinent to your situation.
EDIT2: to explain, when you bind the DOCUMENT here, once the function completes, the document still has the event and then activates it at that time (after the function)... I hope I am explaining this so it makes sense.

Setting priorities on HTML Events

We have a Web system that uses a combination of OnBlur and OnMouseDown events. Unfortunately, for a strange reason the OnMouseDown event handler is being triggered before calling the OnBlur event handler.
This is not what we want. Instead, we want to always call the OnBlur event handler prior to calling the onMouseDown event handler. Is there a way to do so, perhaps giving the onBlur a higher priority?
Previously, instead of using the onMouseDown event handler we had the onclick event. However, this posed a number of problems especially due to the single-threaded nature of JavaScript.

Catch event #2, fire event #1. Then let event #2 go through.
.. Catch-and-release pattern :)

You'll have to fake it by using a status variable. It's a bit dirty, but it works: the meat of doImportantStuff will only be run once.
var importantStuffDone = false;
function doImportantStuff(){
if(!importantStuffDone){
// Do something important
importantStuffDone = true;
}
}
function doOnBlur(){
// This function gets bound to the blur event
doImportantStuff();
// Do other blur stuff
}
function doOnMouseDown(){
// This function gets bound to the mousedown event
doImportantStuff();
// Do other mousedown stuff
}