How does jquery ui disable default events and define custom events?

Question

How does jquery ui disable default events and define custom events? (e.g. disable the click event of a tab and define a custom tabselect event)

• Where can I read about this deeply?
• Can you specify places in jquery ui code to make this happen.
• Can you give a simple example to explain how this happens.

Answer 1

Your question is a bit vague, but I think you are asking how jQuery implements preventDefaultand dispatches custom events. This is what I will answer.

Default Prevention and Distribution

, , , . . , . - , . , , , , , . JavaScript, -: W3C Microsoft.

JavaScript W3C DOM Level 2 Events, DOM Level 3 Events. addEventListener. , - . , preventDefault , stopPropagation.

Internet Explorer 9 W3C. attachEvent. , window.event. , false returnValue , true cancelBubble.

, , :

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...
}

, :

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

jQuery event.js. add , jQuery.bind jQuery.on. jQuery.Event.

JavaScript. W3C Microsoft. , . , . :

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;
    }
};

, jQuery, , , .

Answer 2

, , , - :

$("a").click(function(event) {
   //Prevent the default behaviour
   event.preventDefault();

   //Do your own thing:
   alert("hello!");
});

Google preventDefault() , preventDefault().

. , .change(), .click(), focus(), submit(),...

$('input[type="text"]').focus(function(event) {
   event.preventDefault();

   alert("Uhoh..");
});

: http://api.jquery.com/event.preventDefault/

Answer 3

event.stopPropigation() event.preventDefault() .

, , . , , "" (, URL- );

$('.wrapper').delegate("a", "click", function(){
     event.preventDefault();
     //Stop from sending window.location = $(this).att('href');
});
$('.wrapper').delegate("a span", "click", function (){
    event.stopPropigation();
    //This will stop the click event from bubbling out of the span, up to the a, and calling the above event listener as well.
});

, , , . OHhh, .delegate() , javascript, DOM .