# 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>
```
