If you need to find a way to get the list off all the events bound on an element here is a code that you can use.

My example cover event delegation just to show how these events are displayed in the console.

.

jQuery("myelemnt").on({
	click: function(){ console.log("click") },
    mouseout: function(){ console.log("mouseout") }
});

//test event delegation
jQuery("myelemnt").on("click","a", function(){
	console.log("a click");
 });
jQuery("myelemnt").on("mouseout","a", function(){
	console.log("a mouseout");
});

//for jQuery 1.8 +
var $events = jQuery._data(jQuery("myelemnt")[0], "events" );
//for jQuery 1.7 and below
//var $events = jQuery('myelemnt').data('events');

//validate if the element has an event attached
if(typeof $events != "undefined"){
	//iteration to get each one of the handlers
	jQuery.each($events, function(i, event){
		jQuery.each(event, function(i, handler){
			console.log(handler); // write on console the handler
		});
	});
}

Output example:

Useful links:

• http://stackoverflow.com/questions/1236067/test-if-event-handler-is-bound-to-an-element-in-jquery
• http://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery

I really hope you find this information useful.

Yup, for those that are always looking to improve their jQuery skills: jQuery Coding Standards & Best Practices. Thanks to my friend Alex Arriaga for sharing me this link.

Hope you find this information useful!!

In a previous post I shared  How to combine Isotope Sort and Filter in a real example. At the end of my post I mentioned that should be nice if Isotopo could create dynamically all the sorts/filters within getSorData.

In this post I will share how I achieve that, if you don’t know about Isotope and what is its purpose I invite you to first read my previous post about Isotope.

getSortData option:

“This option accepts an object, whose values are the functions to extract the data. Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.”

So, the data extracted can be anything accessible in the item element via jQuery. You can use a text element, numerical data ( using parseInt( ) or parseFloat( ) ), a data attribute or a property like the width of each item element.

Your getSortData functions could looks like the follow:

getSortData: {
    sort1: function($elem) {
        return parseInt($elem.attr('data-category-sort1'), 10);
    },
    bywidth: function($elem) {
        return $elem.width();
    },
    byname: function($elem) {
        return $elem.find('.name').text();
    }
    // more...
}

The problem with this approach is that if you needs a new sorting, well, you will need to add manually that new function inside getSortdata. I have created a function that create these sorting functions dynamically, the function doesn’t cover all the scenarios but is possible to add more easily:

function createSort(){
    var sorts = {};
    var $source = jQuery('source'); //from where I will read data
    $source.each(function() {
        var $element = jQuery(this),
        findBy = $element.children('a').data('sort-type'), //element, numerical data, data attribute or a property
	key = $element.children('a').data('option-value'); //the name of the element, numerical data, data attribute or a property
	//if the sort is based on a css class (an element)
        if(findBy === "class"){
            sortData[key] = function($elem){return $elem.find('.'+ key).text();};
        }
	//if the sort is based on a data attribute (in my scenario is a numerical attribute)
	if(findBy === "attr"){
	    sortData[key] = function($elem){return parseInt($elem.attr('data-category-' + key), 10);};
        }
    });
    return sortData;
}

//then I call the function and pass the result to getSortData
var sort_data = createSort(),
$container.isotope({
    //more code.
    getSortData:sort_data
});

And where is the jQuery(‘source’) that is used inside createSort()?. In my case all the functions are created based on a list of options created with a “ul” and each “li” element correspond to a type of sorting that will be read by my function createSort():

<ul class="sort-by option-set" id="sort-by" data-option-key="sortBy">
	<li><a href="#sortBy=title" data-option-value="title" data-sort-type="class">By Title</a></li>
	<li><a href="#sortBy=sports" data-option-value="sports" data-sort-type="attr">sports</a></li>
	<li><a href="#sortBy=technics" data-option-value="technics" data-sort-type="attr">technics</a></li>
</ul>

And is done!!.. hope you find this information useful.

Recently I have been helping one of our clients to improve the performance of a particular section of their portal that shows in a set of tabs a huge list of items grouped by a set of categories, each item shows in a tool-tip a summary of it’s meaning/purpose… yes, jQuery is involved, and yes!, mouseenter/mouseleave or mouseover/mouseout is Involved too.. and yes… hold on.. JavaScript Event Delegation was involved??… event what??, ok, here we go.

The page looks like the next image:

One of the aspects I wanted to improve was the JavaScript code used to show the tool-tip on each of the items, why?, let’s take a look at the code:

$("my-path a[title]").live("mouseover",function(){
	// calling the plugin to show the tool-tip
});

Apparently, nothing wrong right?, a normal but old way to bind a mouseover event to an element, in this case to all links that match the jQuery selector  –> $(“my-path a[title]”), wait a minute, to all links??…  ooh no, you mean to all the 500+ links multiplied by 6 tabs, that is 3000+ items!! that is insane!!.

After a moment of shock I was determined to find a better way to handle that JavaScript code. I knew I needed a way to avoid listening to all the items (links) and instead listening only the parent  and when the parent detected a mouseenter/mouseleave event, then be able to determine if the user was in a link and then show up the tooltip; my teammates Iván Santiesteban and José (Pepe) Martínez point me in the right direction, they told me: use JavaScript Event Delegation.

I really recommend to read How JavaScript Event Delegation Works Written by David Walsh, in resume:

“Event delegation allows you to avoid adding event listeners to specific nodes;  instead, the event listener is added to one parent.”

In jQuery you can use .on() or .delegate(), all depends of your jQuery version, I had to use .delegate() since we use jQuery 1.6.x with that client, so, my new code looks like:

$j("#parent").delegate("a", "mouseenter", function(event) {
// more code here...
});
$j("#parent").delegate("a", "mouseleave", function() {
// more code here...
});

Now, I just have two listeners instead of 3000+!!. In my code I’m using mouseenter/mouseleave, you can use mouseover/mouseleave also, but be careful! all depends of your HTML and/or of the behavior you expected.

From jQuery .mouseenter() documentation:

“mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.”

The performance of the page was increased dramatically in FF and response much better in IE7/8, still IE 7/8 sucks!.

I really hope you find this information useful.