用原生js监听vue里调用的bootstrap模态框

痛定思痛。 2021-08-13 19:11 501阅读 0赞

因为是MVC的项目，所以虽然用了vue，但不是我们平常写的SPA，而是在页面中去单独引用。

那么当我们在vue中去调用bootstrap中的模态框时，怎么去监听模态框的显示和隐藏呢？

首先，对于bootstrap中的模态框显示隐藏的监听，bootstrap本身是有一套方法的。

<table> 
 <thead> 
  <tr> 
   <th align="left">事件类型</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">show.bs.modal</td> 
   <td align="left"><em>show</em>方法调用之后立即触发该方法。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的<em>relatedTarget</em>属性进行访问。</td> 
  </tr> 
  <tr> 
   <td align="left">shown.bs.modal</td> 
   <td align="left">此事件在模态框已经显示出来（并且同时在CSS过渡效果完成）之后触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的<em>relatedTarget</em>属性进行访问。</td> 
  </tr> 
  <tr> 
   <td align="left">hide.bs.modal</td> 
   <td align="left"><em>hide</em>方法调用之后立即触发事件。</td> 
  </tr> 
  <tr> 
   <td align="left">hidden.bs.modal</td> 
   <td align="left">此事件在模态框被隐藏（并且同时在CSS过渡效果完成）之后被触发。</td> 
  </tr> 
  <tr> 
   <td align="left">loaded.bs.modal</td> 
   <td align="left">从<em>远端的数据源</em>加载完数据之后触发该事件。</td> 
  </tr> 
 </tbody> 
</table>

$('#myModal').on('hidden.bs.modal', function (e) { 
      // do something...
    })

那么我们说如果是使用上述方法，一般情况下是可以正常监听到事件的，但是对于一些特殊场景，就显得有些low了，比如在vue中去调用了bootstrap的模态框，但是你又使用了上述的方法，你会发现，这个js并没有监听到模态框的状态。

这是因为js代码是单线程自上而下执行的，而当这段代码执行的时候，vue里的代码还没有执行，所以你根本监听不到元素，那么这个时候我们应该怎么写呢？

$("document").on("show.bs.modal", ".modal", function(e) { 
        // do something...
    })

这样写的好处是，即使是动态创建的元素在该选择器中范围内也是能触发回调函数的。那这里就是应用了事件委托的原理。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/fc58ddd306694650ba311b9f1c90b701.png