Use a more individual event namespace

[phaidon]

This issue is based on #8379 and #6921 and the request of @mdo to open a new issue for it.

Bootstrap 3.0 is using an event namespace, what is great. For example:
var e = $.Event('hide.bs.' + this.type)

But this namespace is not really individual. Because of the point it can be identical with the hide event of other libs. For example prototype (see #8379).

I know that bootstrap does not support other libs, but if it is using a namespace it would make sense to make it unique.

The solution could be to change the event name, eg, 'bs:hide.' + this.type (to use Backbone-inspired namespacing).

[cvrebert]

Such a change could not be made until v4 due to backward compatibility.

[phaidon]

Such a change could not be made until v4 due to backward compatibility.

I already thought so. But it would be nice to keep it in mind for v4.

[ggam]

@cvrebert why not create a v4 milestone to group this kind of proposals?

[gschueler]

+1 i would like to see this fixed

[cvrebert]

Added to our internal v4 planning document.

[colllin]

I spent some time digging into the conflict with Prototype and the 'hide' event.

Here's an explanation of why it happens, which I just posted on stackoverflow:
http://stackoverflow.com/a/24236506/361609

I think there might be a solution --
We could prevent jQuery from calling Prototype's .hide() function if we called event.preventDefault(). The problem is, Bootstrap relies on event.isDefaultPrevented() to check if someone wants to cancel it's plugin functionality. So how can Bootstrap allow other people to call (or not call) event.preventDefault() but still make sure event.preventDefault() is ALWAYS called before the event chain finishes?

Maybe not so hard... I haven't tested this, it's just an idea:

Instead of (excerpted from tooltip.js):

var e    = $.Event('hide.bs.' + this.type)
// ...
this.$element.trigger(e)
if (e.isDefaultPrevented()) return

maybe something like

var e = $.Event('hide.bs.' + this.type)
// ...
e.preventDefault();
var isDefaultPrevented = false;
e.preventDefault = function() {
    isDefaultPrevented = true;
};
this.$element.trigger(e)
if (isDefaultPrevented) return