Question

嘿伙计们，我刚刚浏览了modal.js插件，遇到了以下几行：

  var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

现在我想该行实际上是定义一个自定义事件，我确实理解自定义事件。说实话，我理解发生的各个部分，但我不能说我完全理解这一特定的路线，首先。

我们使用$ .Event（）创建一个自定义事件，然后在内部我们命名事件'shown.bs.modal'，然后我们将一个对象文字作为第二个参数传递给我（对我来说它看起来更像是一个对象文字，其中有另一个对象文字），我的问题在于理解代码的{ relatedTarget: _relatedTarget }。我不明白为什么插件需要代码行，这行有什么功能？

如果我在console.log _relatedTarget我得到以下内容：

<a data-target="#myModal" data-toggle="modal" class="btn btn-primary btn-lg">

我的困难也可以在git上找到：line 99。

如果你们其中一个Javascript天才可以向我解释在该行上发生的事情，或者甚至给我一个粗略的想法，我会非常感激。

谢谢。

亚历山大。

Answer 1

这是一个命名空间事件。

该事件被称为“显示”，并且它被命名为“bs.modal”，以避免与可能定义的任何其他“显示”事件冲突。 _relatedTarget变量正在代码中的其他位置定义。当它作为对象传递给自定义事件时，它将被分配给事件对象。这样你就可以使用它并在像这样的处理程序中引用它：

$('something').on('shown',function(e) {
    console.log(e.relatedTarget);   // this was passed as that obj param
});

希望这有助于展示一个例子。另请阅读：

http://api.jquery.com/category/events/event-object/
http://api.jquery.com/event.namespace/

另外编辑：您可以为shown.bs.modal指定一个处理程序，只有在调用特定的“显示”事件时才会调用它。这样，任何其他调用'显示'的东西都不会触发你的处理程序。

Answer 2

查看模式here的文档并搜索relatedTarget。

到目前为止，您对代码的理解是正确的。它将单击按钮的引用传递给事件处理程序。

然后，您可以在事件处理程序$('#modal').on('show.bs.modal', function (event) { ... }内找到单击的按钮。

如果你喜欢根据点击的按钮显示具有不同内容的模态，那么文档会写得很方便。然后，您可以向按钮添加数据属性，以便为模态附加一些信息。

这是jsFiddle。它几乎是来自bootstrap文档的代码。

modal.js中复杂的自定义$ .Event

2 个答案: