Как jquery UI отключить события по умолчанию и определить пользовательские события?

Question

Как jquery ui отключить события по умолчанию и определить пользовательские события? (например, отключить событие нажатия вкладки и определить пользовательское событие выбора табуляции)

1. Где я могу прочитать об этом глубоко?
2. Можете ли вы дать места в коде jquery ui, чтобы это произошло
3. Можете ли вы привести простой пример, чтобы объяснить, как это происходит

Answer 1

Ваш вопрос немного расплывчат, но я думаю, вы спрашиваете, как jQuery реализует preventDefault и отправляет пользовательские события. Вот что я отвечу.

Предотвращение действия и распространения по умолчанию

Я думаю, что вы имеете в виду, когда говорите об отключении событий по умолчанию, как предотвращение действия по умолчанию для стандартного события. Нет никакого способа предотвратить запуск стандартного события. Однако для большинства событий слушатели могут запретить браузеру выполнять действие по умолчанию для этого события. Действия по умолчанию - это переход по ссылкам или открытие контекстных меню. Также обработчик может остановить дальнейшее распространение события, что предотвратит вызов прослушивателей, зарегистрированных на предках элемента, на котором он зарегистрирован. Как и в большинстве случаев JavaScript, есть два способа сделать это: стандартный способ W3C и путь Microsoft.

Стандартный способ обработки событий в JavaScript определен в спецификациях W3C DOM Level 2 и, позже, 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!");
});

При поиске preventDefault().

в Google можно найти много документации.

Вы можете использовать это практически для каждого события. Такие как .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.
});

Надеюсь, что этодостаточно близок к простому английскому языку, чтобы помочь вам, не говоря о том, что я пришел с одного из ваших лекционных курсов в колледже.Оооо, и важно использовать .delegate () для просмотра событий, особенно если у вас вообще есть JavaScript, редактирующий DOM.