jquery ui如何禁用默认事件并定义自定义事件？

Question

jquery ui如何禁用默认事件并定义自定义事件？(比如禁用选项卡单击事件并定义自定义tabselect事件)

1. 我在哪里可以深入了解这一点？
2. 你能用jquery ui代码给它发生的地方吗？
3. 你能举一个简单的例子来解释它是如何发生的

Answer 1

您的问题有点模糊，但我认为您是在问 jQuery 如何实现preventDefault和发送自定义事件。这就是我要回答的。

防止默认操作和传播

我认为当您谈论禁用默认事件时，您的意思是防止标准事件的默认操作。根本没有办法阻止标准事件的触发。但是，对于大多数事件侦听器可以阻止浏览器对该事件采取默认操作。默认操作包括点击链接或打开上下文菜单等。处理程序还可以阻止事件进一步传播，这将阻止调用在其注册元素的祖先上注册的侦听器。与 JavaScript 的大多数事情一样，有两种方法可以做事：W3C 标准方法和 Microsoft 方法。

在 JavaScript 中处理事件的标准方法在 W3C 的DOM Level 2 事件以及后来的DOM Level 3 事件规范中定义。您可以使用元素的方法将事件侦听器附加到元素addEventListener。当事件被触发时，您的侦听器函数将被调用并传递一个事件对象。您可以通过调用事件的preventDefault方法来阻止默认操作，并通过调用其方法来阻止其传播stopPropagation。

Internet Explorer 9 之前的版本不支持 W3C 事件系统。您可以使用元素的方法将事件侦听器附加到元素attachEvent。当事件被触发时，您的侦听器函数可以通过该window.event对象访问该事件。false您可以通过分配其属性来阻止默认操作，并通过分配其属性returnValue来停止传播。truecancelBubble

例如，您可以创建一个如下所示的事件侦听器：

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.bindvia调用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 所做的，尽管当然他们的要复杂得多。