Count the number of javascript eventhandlers in the DOM-tree.

Sometimes I’ve wanted to find out how many eventhandlers there are attached to the DOM-tree I’m working with, but I’ve never found a good tool for doing this. I decided to write a simple javascript snippet that traverses the tree and finds the fact for me and it looks like its working pretty good too.

Please don’t hesitate to comment if you find this useful or have any improvement suggestions

* @author Erik Karlsson,
function countEventHandlers(){
var elements = document.getElementsByTagName("*"), len = elements.length,
     counter = 0,
     countermap = [],
     /* fill up with more events if needed or just use those you want to look for */
     events = ['onmousedown', 'onmouseup', 'onmouseover', 'onmouseout', 
                   'onclick', 'onmousemove', 'ondblclick', 'onerror', 'onresize', 'onscroll',
                   'onkeydown', 'onkeyup', 'onkeypress', 'onchange', 'onsubmit'], 
     eventlen = events.length;
for ( var i = eventlen-1; i >= 0; --i ) {
    countermap[events[i]] = 0;   //reset the map
while ( len-- ) {  //go through all DOM-nodes
    var element = elements[len],
        tmp = eventlen;
    while ( tmp-- ) {  //go through all events defined above for each node and see if it exists.
        if ( element[events[tmp]] ) {
var someStats = counter + " events found in total\n\n";
for ( var o in countermap ) {
   someStats += o + " was found " + countermap[o] + " times\n";

, , , , , ,

1 Comment

So you think you’re writing effiecent jQuery selectors?

Think again if you’re writing selectors such as


When selecting against the DOM ID the fastest way to get the node is to use only the id:

$("#myId") //will translate into document.getElementById("myId") internally

otherwise jQuery will first get all DIV-nodes then manually iterate over them looking for an attribute id that’s equal to “myId”. In a case with a large DOM-tree this could be a large performance-hit making your site unusable on slower computers if you’re using selectors like this everywhere.

On the other hand when selecting against CSS-classes it’s faster to use


than just




Strict standards could break admin css in wordpress

The following method in class.wp-scripts.php could break your css if you have strict standards enabled on your server.

	function set_group( $handle, $recursion, $group = false ) {
		$grp = isset($this->registered[$handle]->extra['group']) ? (int) $this->registered[$handle]->extra['group'] : 0;
		if ( false !== $group && $grp > $group )
			$grp = $group;
		return parent::set_group( $handle, $recursion, $grp );

This is because the WP_Scripts inheritance from WP_Dependencies does not follow the signature of the method. WP_Dependencies have the set_group function declared without any default parameters while the subclass have defaulted $group to false.

Easy fix! Just remove the default value on the group parameter so it looks like this:

	function set_group( $handle, $recursion, $group ) {
		$grp = isset($this->registered[$handle]->extra['group']) ? (int) $this->registered[$handle]->extra['group'] : 0;
		if ( false !== $group && $grp > $group )
			$grp = $group;
		return parent::set_group( $handle, $recursion, $grp );

The only place I can find this possible being called from send in a value anyway so there’s no need for having the default value as of right now.


How to get the amount of days in an arbitrary month with leapyear in consideration

function daysInMonth( month, year ) {
       var now  = new Date();
       month = month || now.getMonth()+1; //this month as default
       year = year || now.getFullYear();    //this year as default
       return new Date(year, month, 0).getDate();
//consider January as month 1, February as month 2 ... December 12
daysInMonth( 2, 2003 ); //returns 28, not leap-year
daysInMonth( 2, 2004 ); //returns 29, leap-year
daysInMonth( 7, 2009 ); //returns 31
daysInMonth( ); //returns the amount of days in the current month

, , , ,