如何得到html页面中dataset中的data-*属性，模态框借此进行参数传递

今天在利用bootstrap实现一个跳出模态框的小功能的时候，想要进行参数的传递，以前是通过按钮绑定onclick事件，跳出模态框的同时，给模态框中的标签进行值传递。

页面效果如下：

今天便尝试了一下bootstrap模态框自带的事件进行参数传递。
在模态框中有如下事件：

1.show.bs.modal ：show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
2.shown.bs.modal： 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
3.hide.bs.modal ：hide 方法调用之后立即触发该事件。
4.hidden.bs.modal ：此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
5.loaded.bs.modal ： 从远端的数据源加载完数据之后触发该事件。

想要在模态框显示的时候，就给他赋值，这里选用的事件是show.bs.modal。

js代码如下：

$('#modifyuserModal').on('show.bs.modal', function (event) {
         var a = $(event.relatedTarget) // relatedTarget 事件属性返回与事件的目标节点相关的节点。
         var userName = a.context.dataset.username;
         /*title = a.data('title'), description = a.data('description');*/
         var modal = $(this)
         modal.find('#userName').val(userName);
        /* modal.find('#cm-modal-title').val(title);
         modal.find('#cm-modal-content').val(description);*/
        });

这里需要注意的一个地方就是event.relatedTarget，这个方法的作用就是返回与事件的目标节点相关的节点。，而在这里与其相关的节点就是触发事件的button按钮。

html代码：

<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modifyuserModal"
                                    data-username="张三">密码修改</button>

因为模态框代码与平时没什么区别，就不贴出来了，在这里可以看到这个button多了一条属性data-username。所以我们在js中所要做的事情就是讲这个username取出来。

在上面的图片上我们可以看到button中有很多属性，仔细找会发现，在context中有一条dataset即数据集，里面就存放着我们想要的username，刚开始我尝试了a.dataset.username、a.dataset(‘username’)、a.dataset.getattribute(‘username’)。等等方法都找不到，明明在dataset中已经有这个属性了，为什么还是找不到呢，后来发现因为dataset的外层还包了一个context，最终通过a.context.dataset.username;的方法得到了该属性，通过这里我猜测这个得到的button的结构类型是json类型。

在这里需要一提的是，所引用的jquery版本不同，会导致Cannot read property ‘dataset’ of undefined的错误，本次我所使用的的jquery版本是1.10.2，而换成3.2.1的时候就会出错。