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.

Why 'onkeydown' callback is fired before 'onclick'?

There is the following code:
<div onkeydown="console.log('onKeyDown')">
<button onclick="console.log('onClick')">Test onClick</button>
</div>
If I tab to the button and press Enter I'll see 2 messages: 'onKeyDown' at first and 'onClick' at second. Why does 'onkeydown' event fire before 'onclick' event? I thought that 'onclick' event must bubble firstly.

Click is considered a "KeyPressed" event - keydown and keyup event completed - by JavaScript. Thus when you "begin" to click - by depressing the mouse button, for instance, the onkeydown event will trigger, before the click is released, at which point an onKeyUp event will be registered, and the two events taken together will also trigger an onKeyPressed event.
So browsers will register and process onKeyDown before waiting for the key to be released, at which point an onKeyUp event will be registered and processed.
See https://www.mutuallyhuman.com/blog/keydown-is-the-only-keyboard-event-we-need/ if this explanation is unclear.

Prevent blur() from running

I have a bootstrap popover that becomes active on focus of an input. The popover contains a button in it to perform an ajax request.
I have a blur function that closes the popover if the user clicks away from the input:
$(document).on('blur','.open-popover',function(){
$(".popover").attr("style","");
//and do other things too
});
I am trying to prevent the blur function above from running if the user presses the button in the popover:
$(document).on('click','button',function(){
//prevent the blur actions and
//do ajax stuff
});

Have you looked at stopImmediatePropagation? If using jQuery, then event handlers are fired in the order that they are bound. Just bind the click before the blur, and run stopImmediatePropagation within the click event.
// bind click event first
$(document).on('click','button',function(event){
// keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
event.stopImmediatePropagation();
});
// then attach blur
$(document).on('blur','.open-popover',function(){
$(".popover").attr("style","");
//and do other things too
});

onblur vs onclick timing

There is a textarea element which converts itself into a div when onblur event happens on that same textarea. There is also a button which has its onclick property set to function f.
If one is writing in the textarea and then clicks on a button, f is fired, but also onblur event handler is triggered. Is there some order rules in this case, or the two handler functions may fire in random order?

I created a jsfiddle here: http://jsfiddle.net/z5SEp/
The events for latest Chrome seem to be:
mousedown
blur
mouseup
click
Although I could not find any documentation to rely on, it would make sense to me that blur is fired after mousedown, but before mouseup. Mousedown causes blur, but you could leave your mouse button down for an extended period of time and still cause a blur.
The order of click events will always be 1. mousedown 2. mouseup 3. click. The blur makes sense to be after mousedown but before mouseup.
More things to keep in mind
If you trigger the button click like this: $('button').trigger('click');, then the blur event will not fire, and focus will remain on the textarea.

In this scenario, the blur will always fire first because blur is triggered as soon as the mouse button goes down elsewhere on the page. So when the mouse goes down on your button, the textarea's blur event is fired first. As the mouse comes up, the button's click event is fired.

onFocus stops firing after modal popup

I have where I use an onfocus event handler to do several things. It works great after initial page load. However, after I click on a link that opens a modal popup the onfocus event stops working. Focus still works fine... but the onfocus event is never fired again until the page is reloaded. How can focus happen without the onfocus event firing?
jQuery(":input").on("focus", function(e)
{
console.log("Debug 1");
});
Before the modal popup this call fires the event handler above...
pTR.find("td:eq(13)").children(":first").focus();
After closing the popup that same call does give that element focus, but the event handler isnt fired.
How is this possible?

I didn't understand very well the question, but I think putting
e.preventDefault();
or
e.stopPropagation();
at the beginning of your onfocus event might help...
Try both depending of your situation.