Develop Reference

Add another event at runtime

I have this code:
and I would like to add at runtime by JS something like this:
My idea was doing like this but I dont know how to add AND operator:
form.addEventListener('submitForm', function (e) {
e.preventDefault();
alert('onclick handler called');
}, false);

To not change the HTML itself you can do this
window.addEventListener("load",function() {
let saveBut = document.querySelector('a[title="Save"]');
let form = document.querySelector("[name=thisForm]");
form.addEventListener("submit",function(e) { e.preventDefault(); }); // stop submission by other means than the link
saveBut.onclick=null; // remove the inline event handler
saveBut.addEventListener("click",function(e) {
e.preventDefault(); // stop the link's click
if (validate(e, form)) submitForm(form); // call submitForm if valid
});
});

'submitForm' is referenced as a function in your onclick attribute, but you're trying to use it as an event. It won't work like that, <form> doesn't emit an event called 'submitForm', and it's not being called when you call a submitForm function. <form> does have a submit event.
You should avoid using the onclick attribute (and other on* attributes). Use IDs and addEventHandler to add a click event handler. Then you can just write an entire multi-line function in that handler.
You can also use an <input> or <button> of type=submit and then add an event listener of type submit to the form (if your form is a <form> element). Then you will not need to call any other functions from event listeners. The form will handle that.

Jquery on/off event

So I was given code that looks like
this.$dropdownButton.off('click.fpmenu').on('click.fpmenu', function (evt) {});
where
this.$dropdownButton
Is a valid button element.
However, at the same place if I search for .fpmenu ($('.fpmenu')), I don't get anything.
Is the on/off events that I am trying to attach to $dropdownButton suppose to be a delegate of the click function of fpmenu? If it can't find fpmenu, would it cause the event not to be attached?

The fpmenu is the namespace of the event handler. This enables jQuery to remove specific event handlers, without changing others.
See Event names and namespaces in jQuery's .on() documentation.
Example - click button and see which event handler is called
var button = $('button');
button.on('click.fpmenu', function () { console.log('fpmenu'); }); // add fpmenu named event
button.on('click.somethingElse', function () { console.log('somethingElse'); }); // add somethingElse named event
button.off('click.fpmenu'); // remove fpmenu named event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>

two click handler on same element conflict

I have an element #div_1 which has inside the same document (not extern file) a plain JS function:
var trigger = false;
var div_1 = document.getElementById('div_1')
div_1.onclick = function() { trigger = true; };
and in an extern JS file I have a jQuery button click on the same element:
$(document).ready(function() {
$('#div_1').click(function() {
// some actions here
});
});
The problem is that it does ignore the jQuery clickhandler completely. Is there no way to have two seperate click handler which work both?

There must be something else going on in your code because you can certainly have multiple event handlers on an object.
You can only have one handler assigned via onclick, but that should, in no way, interfere with the jQuery event handler. Please show us a reproducible demo in a jsFiddle because there is likely some other problem with your code causing this.
FYI, I'd strong suggest you not use the onclick attribute for event handlers because there is danger of one event handler overwriting another, something that does not happen when using .addEventListener() or jQuery's .click(). But, neither .addEventListener() or jQuery's .click() will overwrite the onlick.
Here's a working demo that shows both event handlers working just fine: http://jsfiddle.net/jfriend00/4Ge52/

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
}

Cancel jQuery event handling

I have setup onclick event handler in the following manner:
element.onclick = function() { /*code */ }
Imagine there are event handlers setup using jQuery method bind() or similar handlers.
$('element').bind('click', function(){/*another function*/})
How can I prevent invoking handler defined with jQuery from the handler I have described in the beginning?
NB stopPropagation() and etc. jQuery's methods doesn't work from that function, because it is passed with native event object.

I'm not 100% sure what you're asking but maybe this will help:
You can create a new event object (compliant with W3C DOM) via jQuery's exposed Event constructor:
For example:
element.onclick = function(e) {
var aBetterEventObject = jQuery.Event(e);
// Now you can do what you want: (Cross-browser)
aBetterEventObject.preventDefault()
aBetterEventObject.isDefaultPrevented()
aBetterEventObject.stopPropagation()
aBetterEventObject.isPropagationStopped()
aBetterEventObject.stopImmediatePropagation()
aBetterEventObject.isImmediatePropagationStopped()
}
EDIT: Reading through your question again, I don't think propagation is the problem - you seem to want to cancel an event handler from running within an event handler - I'm not sure this is possible. You could just unbind all handlers (jQuery(elem).unbind('click')) but I don't think that's what you're after...

try to add the following line in the jQuery event handler:
return false;

Following on from JimmyP's answer. I've tried this
$('#x').click( function(e){
alert('hello');
});
document.getElementById('x').onclick = function(){
$('#x').unbind('click');
alert("goodbye");
}
The jQuery event runs once in this example. I don't think you can rely on the order of handlers being invoked however you define them, so I guess you'll have to accept that the jQuery event might fire once. Adding the onclick first does prevent the jQuery event from firing at all but, as I said, I don't think that's reliable.

Jquery has a method for namespacing events. http://docs.jquery.com/Namespaced_Events
You can add, trigger and remove separate functions bound to the same event via namespaces:
$("a").bind("click.custom1",function(){ ... });
$("a").bind("click.custom2",function(){ ... });
$("a").trigger("click.custom2");
$("a").unbind("click.custom2");
As long as you unbind the namespaced event your normal onclick should be unaffected. You may have to bind two separate namespaces to the click event as above if that doesn't work.