Question

How jQuery ui disable default events and define custom events?
(like disable tab click event and define custom tabselect event)

1. Where can I read about that deeply?
2. Can you give places in jQuery ui code that it happens
3. Can you give simple example to explain how its happens

Answer 1

Your question is a little vague, but I think you’re asking how jQuery implements preventDefault and sending custom events. That’s what I’ll answer.

Preventing the Default Action and Propagation

I think what you mean when you talk about disabling default events is preventing a standard event’s default action. There’s no way to prevent a standard event from firing at all. However, for most events listeners can prevent the browser from taking the default action for that event. Default actions are things like following links or opening context menus. It’s also possible for a handler to stop the event from propagating further, which will prevent listeners registered on ancestors of the element it was registered on from being called. As with most things JavaScript, there are two ways to do things: the W3C standard way and Microsoft’s way.

The standard way of handling events in JavaScript is defined in W3C’s DOM Level 2 Events and, later, DOM Level 3 Events specifications. You attach an event listener to an element with its addEventListener method. When the event is fired your listener function will be called and passed an event object. You can prevent the default action by calling the event’s preventDefault method and stop it from propagating by calling its stopPropagation method.

Versions of Internet Explorer before 9 don’t support the W3C event system. You attach an event listener to an element with its attachEvent method. When the event is fired your listener function can access the event through the window.event object. You can prevent the default action by assigning false to its returnValue property and stop propagation by assigning true to its cancelBubble property.

For example, you might create an event listener that looks like this:

function handleClick (event) {
    if (event && event.stopPropagation) {
        event.preventDefault();
        event.stopPropagation();
    } else {
        event = window.event;
        event.returnValue = false;
        event.cancelBubble = true;
    }

    // the default action has been prevented and propagation has been stopped
    // do something interesting here...
}

You could then register it on an element like this:

var elem = document.getElementById( 'some-element' );
if (elem.addEventListener) {
    elem.addEventListener( 'click', handleClick, false );
} else {
    elem.attachEvent( 'onclick', handleClick );
}

jQuery handles this in its event.js file. Registering event listeners is handled by the private add function, which is called by jQuery.bind via jQuery.on. Stopping propagation and preventing the default are handled by the corresponding methods of the jQuery.Event class.

Creating Custom Events

There are two ways to create custom events in JavaScript. It’s possible to ask the browser to fire a custom event on an element in both the W3C and Microsoft systems. That works, but it’s usually overkill. It’s much simpler to create an object that keeps track of a list of listener functions and provides methods for adding and removing listeners and dispatching events. Here’s a simple one:

var EventSource = function() {}
EventSource.prototype = {
    attach: function (name, callback) {
        if (!this.listeners) this.listeners = {};
        if (!this.listeners[ name ]) this.listeners[ name ] = [];
        this.listeners[ name ].push( callback );
    },

    detach: function (name, callback) {
        if (!this.listeners || !this.listeners[ name ]) return;
        var listeners = this.listeners[ name ];
        for (var idx = 0; idx < listeners.length; idx++) {
            if (listeners[ idx ] === callback) {
                listeners.splice( idx, 1 );
                break;
            }
        }
    },

    dispatch: function (name, event) {
        if (typeof event === 'undefined') event = {};
        event.event = name;

        if (!this.listeners || !this.listeners[ name ]) return false;
        var listeners = this.listeners[ name ];
        for (var idx = 0; idx < listeners.length; idx++) {
                try {
                    listeners[ idx ]( event );
                } catch (caught) {
                    // ignore it and keep calling the rest of the listeners
                }
            });
        return true;
    }
};

That’s more-or-less what jQuery does, although of course theirs is far more complicated.