Javascript 一直在理解Bootstrap.v3 tab.js源代码

背景

最近，我计划编写自己的js库，主要参考BootstrapV3。我被一些代码卡住了，请帮忙

问题

在BootstrapV3中，我不知道下面两段的效果如何

第1部分：

// line 39 - 47
var hideEvent = $.Event('hide.bs.tab', {
  relatedTarget: $this[0]
})
var showEvent = $.Event('show.bs.tab', {
  relatedTarget: $previous[0]
})

$previous.trigger(hideEvent)
$this.trigger(showEvent)

第2部分：

// line 55 - 62
  $previous.trigger({
    type: 'hidden.bs.tab',
    relatedTarget: $this[0]
  })
  $this.trigger({
    type: 'shown.bs.tab',
    relatedTarget: $previous[0]
  })

我的尝试

在我的脚本中撤销单个tab.js，它就工作了，这意味着上面的两个segmen不依赖于其他widget/util（除了转换效果）

我在tab.js中删除了两段，它仍然可以工作。我不知道这两部分的目的是什么

我回顾了jqapi:$.Event&trigger，我能得到的是定义一些自定义函数和触发器的两个部分

帮助

---

这两部分的目的是什么？非常感谢。

Bootstrap创建了一系列工具，希望尽可能扩展这些工具。这意味着，他们希望允许开发人员使用他们的工具“监听”大量“事件”并执行后续操作

您问题中列出的两个允许开发人员“钩住”任何一个。（bootstrap实际上提供了另外两个选项[“显示”和“隐藏”）。根据文档，在以下情况下会触发这些事件：

show.bs.tab
此事件在tab show上触发，但在显示新选项卡之前。使用

event.target

和

event.relatedTarget

分别以活动选项卡和上一个活动选项卡（如果可用）为目标

显示的.bs.tab
此事件在显示选项卡后在选项卡显示时激发。使用

event.target

和

event.relatedTarget

分别以活动选项卡和上一个活动选项卡（如果可用）为目标

隐藏.bs.tab
当显示新选项卡时（从而隐藏以前的活动选项卡），将触发此事件。使用

event.target

和

event.relatedTarget

分别以当前活动选项卡和即将活动的新选项卡为目标

hidden.bs.tab
此事件在显示新选项卡后触发（从而隐藏以前的活动选项卡）。使用event.target和event.relatedTarget分别针对上一个活动选项卡和新的活动选项卡

例如，“当用户单击某个选项卡时，通过刷新其src停止播放上一个选项卡中的youtube视频”。类似的代码可能是

$('#myTabs').on('show.bs.tab', function(event){
    // previous tab
    if(event.relatedTarget){
        var youtubeIframe = $(event.relatedTarget).find('iframe');
        var src = youtubeIframe.attr('src');
        youtubeIframe.attr('src', 'about:blank');
        youtubeIframe.attr('src', src);
    }
});

或者，您可以将目标锁定为刚刚“隐藏”的选项卡。我们将使用

hide.bs.tab

事件并使用

event.target

，而不是查看当前选项卡并使用其

relatedTarget

，如下所示：

$('#myTabs').on('hide.bs.tab', function(event){
    // current tab
    if(event.target){
        var youtubeIframe = $(event.target).find('iframe');
        var src = youtubeIframe.attr('src');
        youtubeIframe.attr('src', 'about:blank');
        youtubeIframe.attr('src', src);
    }
});

---

注：我确信有更好的方法停止播放youtube视频。这被用作示例代码。

如果您删除了它们，并且在行为中没有看到任何变化，那么它们可能是多余的？你确定这是切换制表符的正确代码吗？最有可能的是，该代码创建并触发了

hide/show.bs.tab

事件。良好的阅读将被@NateBen删除，它可以切换制表符。我不同意这个多余的观点。有人说这是为了一些初始化。@madalinivascu是的，但我不知道hide/show.bs.tab做了什么，我在源代码中看不到任何细节。谢谢你的链接。谢谢。因此，上面的源代码充当自定义定义的钩子，对吗？@RockerLau，它不会“改变”本机引导代码的情况。。选项卡仍将更改。。所有这些都允许您执行作为引导更改结果的操作。我相信如果你想取消一个标签的更改，你需要挂接到标签上的“点击”事件，该事件在bootstrap的代码之前触发，并停止传播（）是的，我明白你的意思，也许我的解释很差，但我想说的是，bootstrap为用户提供了一个在标签切换周期中做某事的钩子。：）是的，你明白了。挂钩在计时事件之前、期间和之后提供：）