# jquery自定义事件
## 需求：我们给每个按钮绑定不同的功能。
其中，我们按下a按钮除了要执行自己的功能还要执行 另外两外按钮的功能。我们可以通过trigger来将其对应的事件进行触发。
那么可以发现我们给每一个div都绑定了自己的事件。这个事件是自已定义的名称，通过trigger来进行将其触发掉。
## 那么我们来分析一下为什么要做这么一项工作。
我们完全可以将操作三个div的功能写在，操作按钮对应的指令中。但是我们没有这么做。
我们可以考虑一下在工作中如果单击按钮要做的功能特别复杂，那么对应的代码全写在这里面。会导致我们的代码杂乱无章。将来不利于维护代码
如果我们将每个元素自己相应的功能拆分，这样的话我们在主业务中的代码会非常清晰。如下图你会觉得我们的代码，各斯其职，不仅写起来简单，而且维护起来也方便。
:-: :-:
## 代码
```
<button>a</button>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<script src="js/jquery.min.js"></script>
<script>
$('button:eq(0)').click(function(){
$('div').trigger('gaibian')
})
$('div:eq(0)').on('gaibian',function () {
$(this).css({width:200, height:200, background:'pink'})
})
$('div:eq(1)').on('gaibian',function () {
$(this).css({width:200, height:200, background:'blue'})
})
$('div:eq(2)').on('gaibian',function () {
$(this).css({width:200, height:200, background:'gold'})
})
</script>
```
