Javascript – Setting priorities on HTML Events

domevent handlingjavascript

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.

Best Answer

Catch event #2, fire event #1. Then let event #2 go through.

.. Catch-and-release pattern :)

Modern jQuery

Use .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

If you're working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using $('.myCheckbox').removeAttr('checked'); since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it – a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.

Javascript – Where should I put
Related Topic
Javascript – Retrieve the position (X,Y) of an HTML element
Javascript – Creating a new DOM element from an HTML string using built-in DOM methods or Prototype
JQuery find events handlers registered with an object
Javascript – Include another HTML file in a HTML file

Best Answer

Related Solutions

Javascript – Setting “checked” for a checkbox with jQuery

Modern jQuery

DOM API

jQuery 1.5.x and below

Related Topic